是否可以创建一个从另一个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
}
其他回答
我遇到了同样的问题,最后使用了JQuery解决方案,使类看起来可以继承其他类。
<script>
$(function(){
$(".composite").addClass("something else");
});
</script>
这将查找具有类“composite”的所有元素,并将类“something”和“else”添加到元素中。所以类似于<div class=“composite”></div>将这样结束:<div class=“composite something 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更强大的文本预处理器,请查看PPWizard:
http://dennisbareis.com/ppwizard.htm
警告:该网站确实很难看,学习曲线很小,但它非常适合通过宏构建CSS和HTML代码。我一直不明白为什么更多的网络程序员不使用它。
对于那些对上述(优秀)文章不满意的人,您可以使用编程技能创建一个变量(PHP或任何一个),并让它存储多个类名。
这是我能想出的最好的办法。
<style>
.red { color: red; }
.bold { font-weight: bold; }
</style>
<? define('DANGERTEXT','red bold'); ?>
然后将全局变量应用于所需的元素,而不是类名本身
<span class="<?=DANGERTEXT?>"> Le Champion est Ici </span>
在特定情况下,可以执行“软”继承:
.composite
{
display:inherit;
background:inherit;
}
.something { display:inline }
.else { background:red }
这仅在将.composite类添加到子元素时有效。它是“软”继承,因为任何未在.composite中指定的值都不会明显继承。请记住,简单地写“inline”和“red”而不是“inherit”仍然会减少字符数。
以下是财产列表,以及它们是否自动执行此操作:https://www.w3.org/TR/CSS21/propidx.html