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

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

例如，假设我们有：

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

我想做的是：

.composite 
{
   .something;
   .else
}

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

当前回答

对于那些对上述（优秀）文章不满意的人，您可以使用编程技能创建一个变量（PHP或任何一个），并让它存储多个类名。

这是我能想出的最好的办法。

<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>

<? define('DANGERTEXT','red bold'); ?>

然后将全局变量应用于所需的元素，而不是类名本身

<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>

其他回答

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

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

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

.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
}

它突然对我奏效了：）

不，你不能这样做

.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是大多数财产的默认值，但不是所有属性的默认值。

给定示例的SCSS方式如下：

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

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

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

推荐文章