是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
当前回答
Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案,我将添加Sass解决方案。
Sass具有扩展选项,允许一个类完全扩展到另一个类。有关扩展的更多信息,请参阅本文
其他回答
而直接继承是不可能的。
可以为父标记使用类(或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时,仍然会出现许多错误。(例如,更改文本装饰类型)。
这在CSS中是不可能的。
CSS中唯一支持的是比另一条规则更具体:
span { display:inline }
span.myclass { background: red }
类为“myclass”的span将同时具有这两个财产。
另一种方法是指定两个类:
<div class="something else">...</div>
“else”的样式将覆盖(或添加)“something”的样式
在特定情况下,可以执行“软”继承:
.composite
{
display:inherit;
background:inherit;
}
.something { display:inline }
.else { background:red }
这仅在将.composite类添加到子元素时有效。它是“软”继承,因为任何未在.composite中指定的值都不会明显继承。请记住,简单地写“inline”和“red”而不是“inherit”仍然会减少字符数。
以下是财产列表,以及它们是否自动执行此操作:https://www.w3.org/TR/CSS21/propidx.html
正如其他人所说,您可以向一个元素添加多个类。
但这不是真正的重点。我明白你关于遗产的问题。真正的问题是CSS中的继承不是通过类来实现的,而是通过元素层次结构来实现的。因此,要对继承的特性进行建模,需要将它们应用于DOM中不同级别的元素。
你能做的就是这个
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>