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

例如,假设我们有:

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

我想做的是:

.composite 
{
   .something;
   .else
}

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


当前回答

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

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

其他回答

不幸的是,CSS不像C++、C#或Java等编程语言那样提供“继承”。您不能声明一个CSS类,然后用另一个CSS扩展它。

但是,您可以将多个类应用于标记中的标记。。。在这种情况下,有一组复杂的规则来确定浏览器将应用哪些实际样式。

<span class="styleA styleB"> ... </span>

CSS将根据标记查找可应用的所有样式,并将这些多个规则中的CSS样式组合在一起。

通常,会合并样式,但当出现冲突时,通常会以稍后声明的样式获胜(除非在其中一个样式上指定了!important属性,在这种情况下,将获胜)。此外,直接应用于HTML元素的样式优先于CSS类样式。

您可以使用相反的方法来实现相同的结果-从复合开始,然后使用unset关键字删除样式。例如,如果从以下示例组成开始:

.composite {
    color: red;
    margin-left: 50px;
    background-color: green
}

然后可以增加选择器的特异性,以使用unset选择性地删除样式:

.composite.no-color {
    color: unset
}

.composite.no-margin-left {
    margin-left: unset
}

.composite.no-background-color {
    background-color: unset
}

这里有一个JSFiddle演示了这种方法。

这种方法的一个好处是,由于复合选择器的特异性高于复合选择器本身,因此不需要所有类的组合来实现多个组合的预期结果:

/* Multi-unset compound selector combinations, such as the one that follows, ARE NOT NECESSARY because of the higher specificity of each individual compound selectors listed above. This keeps things simple. */
.composite.no-background-color.no-color.no-margin-left {
    background-color: unset;
    color: unset;
    margin-left: unset
}

此外,在96%的未设置关键字支持率下,浏览器覆盖率非常高。

在Css文件中:

p.Title 
{
  font-family: Arial;
  font-size: 16px;
}

p.SubTitle p.Title
{
   font-size: 12px;
}

你能做的就是这个

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>

不,你不能这样做

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