是否可以在另一个中引用一个CSS规则？

Question

例如,如果我有以下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 ***/

}

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

Answer 1

不,您不能从另一个引用一个规则集.

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

.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">

这两种方法都可以解决您的问题.

如果您使用类名来描述为什么应该设置元素而不是应该如何设置样式,这可能会有所帮助.保留如何在样式表.

Answer 2

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

如果.someDiv是唯一的,我也会选择给它一个id并使用id在css中引用它.

Answer 3

如果你愿意并且能够使用一点jquery,你可以简单地这样做:

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

如果您有一个已经处理该页面的javascript,或者您可以将其包含在<script>标记中的某个位置.如果是这样,将上面的内容包装在文档就绪函数中:

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

我最近在更新wordpress插件时遇到了这个问题.它们已被更改,在css中使用了很多"!important"指令.我不得不使用jquery强制我的样式,因为天才决定在几个标签上声明!important.

Answer 4

您可以使用@extend通过SASS预处理器轻松完成此操作.

someDiv {
    @extend .opacity;
    @extend .radius;
}

哦,你也可以使用JavaScript(jQuery):

$('someDiv').addClass('opacity radius')

最简单的当然是在HTML中添加多个类

<div class="opacity radius">