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

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

例如，假设我们有：

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

我想做的是：

.composite 
{
   .something;
   .else
}

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

当前回答

我意识到这个问题已经很老了，但是，这里什么都没有！

如果目的是添加一个包含多个类的财产的类作为本机解决方案，我建议使用JavaScript/jQuery（jQuery确实不是必需的，但确实很有用）

例如，如果您有从.baseClass1和.baseClass2“继承”的.bumbellaClass，则可以有一些JavaScript在就绪时启动。

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

现在.umbrellaClass的所有元素都将具有.baseClasss的所有财产。请注意，与OOP继承一样，.umbrellaClass可能有也可能没有自己的财产。

这里唯一需要注意的是，是否有动态创建的元素在代码触发时不存在，但也有简单的方法可以解决。

不过，Sucks css没有原生继承。

其他回答

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

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

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

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

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

composite.something, composite.else
{
    blblalba
}

它突然对我奏效了：）

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

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

我意识到这个问题已经很老了，但是，这里什么都没有！

如果目的是添加一个包含多个类的财产的类作为本机解决方案，我建议使用JavaScript/jQuery（jQuery确实不是必需的，但确实很有用）

例如，如果您有从.baseClass1和.baseClass2“继承”的.bumbellaClass，则可以有一些JavaScript在就绪时启动。

$(".umbrellaClass").addClass("baseClass1");
$(".umbrellaClass").addClass("baseClass2");

现在.umbrellaClass的所有元素都将具有.baseClasss的所有财产。请注意，与OOP继承一样，.umbrellaClass可能有也可能没有自己的财产。

这里唯一需要注意的是，是否有动态创建的元素在代码触发时不存在，但也有简单的方法可以解决。

不过，Sucks css没有原生继承。

给定示例的SCSS方式如下：

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

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

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

推荐文章