是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
是否可以创建一个从另一个CSS类(或多个)“继承”的CSS类。
例如,假设我们有:
.something { display:inline }
.else { background:red }
我想做的是:
.composite
{
.something;
.else
}
其中“.composite”类将显示为内联,并具有红色背景
当前回答
事实上,你所要求的是存在的——但它是作为附加模块完成的。查看有关.NET中更好的CSS的示例。
查看Larsenal关于使用LESS的回答,了解这些附加组件的功能。
其他回答
不,你不能这样做
.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是大多数财产的默认值,但不是所有属性的默认值。
正如其他人所说,您可以向一个元素添加多个类。
但这不是真正的重点。我明白你关于遗产的问题。真正的问题是CSS中的继承不是通过类来实现的,而是通过元素层次结构来实现的。因此,要对继承的特性进行建模,需要将它们应用于DOM中不同级别的元素。
您可以使用相反的方法来实现相同的结果-从复合开始,然后使用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%的未设置关键字支持率下,浏览器覆盖率非常高。
对于那些对上述(优秀)文章不满意的人,您可以使用编程技能创建一个变量(PHP或任何一个),并让它存储多个类名。
这是我能想出的最好的办法。
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
<? define('DANGERTEXT','red bold'); ?>
然后将全局变量应用于所需的元素,而不是类名本身
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
我遇到了同样的问题,最后使用了JQuery解决方案,使类看起来可以继承其他类。
<script>
$(function(){
$(".composite").addClass("something else");
});
</script>
这将查找具有类“composite”的所有元素,并将类“something”和“else”添加到元素中。所以类似于<div class=“composite”></div>将这样结束:<div class=“composite something other”></分区>