是否可以创建一个从另一个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类样式。

其他回答

你能做的就是这个

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>

而直接继承是不可能的。

可以为父标记使用类(或id),然后使用CSS组合符改变子标记的继承行为。

p.test{背景色:rgba(55,55,55,0.1);}p.test>span{背景色:rgba(55,55,55,0.1);}p.test>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span{背景色:rgba(55,55,55,0.1);}p.test/span>span>span>span{背景色:rgba(55,55,55,0.1);}p.test/span>span>span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>/span>span>span{背景色:rgba(55,55,55,0.1);}p.test>span>span>span>span>span>span>span{背景色:rgba(55,55,55,0.1);}<p class=“test”><span>一种可能的<span>解决方案<span>是使用<span>多个<span>嵌套<span>标记</span></span><span></span></span></p>

我不建议像示例那样使用这么多跨度,但这只是概念的证明。当试图以这种方式应用CSS时,仍然会出现许多错误。(例如,更改文本装饰类型)。

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

composite.something, composite.else
{
    blblalba
}

它突然对我奏效了:)

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

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

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

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

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

不要忘记:

div.something.else {

    // will only style a div with both, not just one or the other

}