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

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

例如，假设我们有：

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

我想做的是：

.composite 
{
   .something;
   .else
}

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

当前回答

CSS并没有真正做到你所要求的。若你们想在写规则的时候考虑到这个复合的想法，你们可能想看看指南针。这是一个样式表框架，看起来类似于前面提到的Less。

它让你做调酒和所有的好生意。

其他回答

看看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;
}

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

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

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

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

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

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

您可以向单个DOM元素添加多个类，例如。

<div class="firstClass secondClass thirdclass fourthclass"></div>

后面的类（或更具体的类）中给出的规则将覆盖。所以这个例子中的第四类占了上风。

继承不是CSS标准的一部分。

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

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

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

Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案，我将添加Sass解决方案。

Sass具有扩展选项，允许一个类完全扩展到另一个类。有关扩展的更多信息，请参阅本文

推荐文章