是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
当前回答
不要忘记:
div.something.else {
// will only style a div with both, not just one or the other
}
其他回答
一个元素可以包含多个类:
.classOne { font-weight: bold; }
.classTwo { font-famiy: verdana; }
<div class="classOne classTwo">
<p>I'm bold and verdana.</p>
</div>
不幸的是,这几乎和你会得到的一样接近。我希望有一天能看到这个特性以及类别名。
您可以向单个DOM元素添加多个类,例如。
<div class="firstClass secondClass thirdclass fourthclass"></div>
后面的类(或更具体的类)中给出的规则将覆盖。所以这个例子中的第四类占了上风。
继承不是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不像C++、C#或Java等编程语言那样提供“继承”。您不能声明一个CSS类,然后用另一个CSS扩展它。
但是,您可以将多个类应用于标记中的标记。。。在这种情况下,有一组复杂的规则来确定浏览器将应用哪些实际样式。
<span class="styleA styleB"> ... </span>
CSS将根据标记查找可应用的所有样式,并将这些多个规则中的CSS样式组合在一起。
通常,会合并样式,但当出现冲突时,通常会以稍后声明的样式获胜(除非在其中一个样式上指定了!important属性,在这种情况下,将获胜)。此外,直接应用于HTML元素的样式优先于CSS类样式。
完美的时机:我从这个问题转到了我的电子邮件,找到了一篇关于Less的文章,这是一个Ruby库,除其他外,它还做了以下工作:
由于super看起来就像页脚,但字体不同,所以我将使用Less的类包含技术(他们称之为mixin)来告诉它也包含这些声明:
#super {
#footer;
font-family: cursive;
}