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类样式。

其他回答

是的，但不完全符合这个语法。

.composite,
.something { display:inline }

.composite,
.else      { background:red }

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

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

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

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

给定示例的SCSS方式如下：

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

.composite {
  @extend .something;
  @extend .else;
}

更多信息，请查看sass基础知识

你能做的就是这个

CSS

.car {
  font-weight: bold;
}
.benz {
  background-color: blue;
}
.toyota {
  background-color: white;
}

HTML

<div class="car benz">
  <p>I'm bold and blue.</p>
</div>
<div class="car toyota">
  <p>I'm bold and white.</p>
</div>

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

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

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

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

推荐文章