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

例如,假设我们有:

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

我想做的是:

.composite 
{
   .something;
   .else
}

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


当前回答

如果通过php对.css文件进行预处理,则可以实现所需的效果。...

$something='color:red;'
$else='display:inline;';
echo '.something {'. $something .'}';
echo '.else {'. $something .'}';
echo '.somethingelse {'. $something  .$else '}';

...

其他回答

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.composite,
.something { display:inline }

.composite,
.else      { background:red }

不,你不能这样做

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