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

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

例如，假设我们有：

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

我想做的是：

.composite 
{
   .something;
   .else
}

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

当前回答

我认为这是一个更好的解决方案：

[class*=“button-“] {
  /* base button properties */
}
.button-primary { ... }
.button-plain { ... }

其他回答

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

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

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

正如其他人所说，您可以向一个元素添加多个类。

但这不是真正的重点。我明白你关于遗产的问题。真正的问题是CSS中的继承不是通过类来实现的，而是通过元素层次结构来实现的。因此，要对继承的特性进行建模，需要将它们应用于DOM中不同级别的元素。

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

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

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

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

不，你不能这样做

.composite 
{
   .something;
   .else
}

这不是OO意义上的“类”名称。something和.else只是选择器而已。

但是您可以在一个元素上指定两个类

<div class="something else">...</div>

或者你可以研究另一种形式的继承

.foo {
  background-color: white;
  color: black;
}

.bar {
  background-color: inherit;
  color: inherit;
  font-weight: normal;
}

<div class="foo">
  <p class="bar">Hello, world</p>
</div>

其中段落背景颜色和颜色继承自封闭div中的设置，该div为.foo样式。您可能需要检查确切的W3C规范。无论如何，inherit是大多数财产的默认值，但不是所有属性的默认值。

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

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

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

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

推荐文章