是否可以引用另一个CSS规则?

例如,如果我有以下的HTML:

<div class="someDiv"></div> 

和这个CSS:

 .opacity { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .radius { border-top-left-radius: 15px; border-top-right-radius: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; } .someDiv { background: #000; height: 50px; width: 200px; /*** How can I reference the opacity and radius classes here so this div has those generic rules applied to it as well ***/ } 

就像在脚本语言中一样,通常在脚本的顶部使用通用函数,每次需要使用该函数时,只需调用函数,而不是每次重复所有代码。

不,你不能引用另一个规则集。

但是,您可以在样式表中的多个规则集上重复使用select器, 在单个规则集上使用多个select器(通过用逗号分隔它们 )。

 .opacity, .someDiv { filter:alpha(opacity=60); -moz-opacity:0.6; -khtml-opacity: 0.6; opacity: 0.6; } .radius, .someDiv { border-top-left-radius: 15px; border-top-right-radius: 5px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; } 

您也可以将多个类应用于单个HTML元素(类属性采用空格分隔的列表)。

 <div class="opacity radius"> 

这两种方法都可以解决你的问题。

如果您使用类名来描述为什么应该devise一个元素,而不是应该如何devise样式,这可能会有所帮助。 留在样式表中。

你不能,除非你使用某种扩展的CSS,如SASS 。 然而,将这两个额外的类应用于.someDiv是非常合理的。

如果.someDiv是唯一的,我也会select给它一个ID和引用它在CSS使用ID。

如果你愿意并能够雇用一个小jQuery,你可以简单地这样做:

 $('.someDiv').css([".radius", ".opacity"]); 

如果你有一个已经处理页面的javascript,或者你可以把它放在<script>标签的某个地方。 如果是这样,在文档就绪function中包装上面:

 $(document).ready( function() { $('.someDiv').css([".radius", ".opacity"]); } 

我最近在更新wordpress插件时遇到了这个问题。 他们已经改变了,在CSS中使用了很多“重要的”指令。 我不得不使用jquery强制我的风格,因为天才的决定宣布!在几个标签重要。

只需将这些类添加到您的HTML

 <div class="someDiv radius opacity"></div>