是否可以创建一个从另一个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 { display:inline }
.composite,
.else { background:red }
这在CSS中是不可能的。
CSS中唯一支持的是比另一条规则更具体:
span { display:inline }
span.myclass { background: red }
类为“myclass”的span将同时具有这两个财产。
另一种方法是指定两个类:
<div class="something else">...</div>
“else”的样式将覆盖(或添加)“something”的样式
不要忘记:
div.something.else {
// will only style a div with both, not just one or the other
}
有一些类似LESS的工具,它允许您在类似于所描述的更高抽象级别上编写CSS。
更少的人称这些为“混合”
而不是
/* CSS */
#header {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#footer {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
你可以说
/* LESS */
.rounded_corners {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners;
}
Less和Sass是以有价值的方式扩展CSS语言的CSS预处理器。他们提供的众多改进中只有一项是您正在寻找的选项。Less有一些非常好的答案,我将添加Sass解决方案。
Sass具有扩展选项,允许一个类完全扩展到另一个类。有关扩展的更多信息,请参阅本文