CSS类可以继承一个或多个其他类吗？

是否可以创建一个从另一个CSS类（或多个）“继承”的CSS类。

例如，假设我们有：

.something { display:inline }
.else      { background:red }

我想做的是：

.composite 
{
   .something;
   .else
}

其中“.composite”类将显示为内联，并具有红色背景

当前回答

不幸的是，CSS不像C++、C#或Java等编程语言那样提供“继承”。您不能声明一个CSS类，然后用另一个CSS扩展它。

但是，您可以将多个类应用于标记中的标记。。。在这种情况下，有一组复杂的规则来确定浏览器将应用哪些实际样式。

<span class="styleA styleB"> ... </span>

CSS将根据标记查找可应用的所有样式，并将这些多个规则中的CSS样式组合在一起。

通常，会合并样式，但当出现冲突时，通常会以稍后声明的样式获胜（除非在其中一个样式上指定了！important属性，在这种情况下，将获胜）。此外，直接应用于HTML元素的样式优先于CSS类样式。

其他回答

在Css文件中：

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

我也在疯狂地寻找它，我只是通过尝试不同的东西来找到它：P。。。你可以这样做：

composite.something, composite.else
{
    blblalba
}

它突然对我奏效了：）

一个元素可以包含多个类：

.classOne { font-weight: bold; }
.classTwo { font-famiy:  verdana; }

<div class="classOne classTwo">
  <p>I'm bold and verdana.</p>
</div>

不幸的是，这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。

看看CSS合成：https://bambielli.com/til/2017-08-11-css-modules-composes/

根据他们的说法：

.serif-font {
    font-family: Georgia, serif;
}

.display {
    composes: serif-font;
    font-size: 30px;
    line-height: 35px;
}

我在我的反应项目中使用它。

完美的时机：我从这个问题转到了我的电子邮件，找到了一篇关于Less的文章，这是一个Ruby库，除其他外，它还做了以下工作：

由于super看起来就像页脚，但字体不同，所以我将使用Less的类包含技术（他们称之为mixin）来告诉它也包含这些声明：

#super {
  #footer;
  font-family: cursive;
}

推荐文章