是否可以引用另一个CSS规则？ [英] Is it possible to reference one CSS rule within another?

问题描述

例如，如果我有以下HTML：

For example if I have the following 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 ***/

}

像脚本语言一样，您使用通常写在脚本顶部的通用函数

Like how in scripting languages you have generic functions that are used often written at the top of the script and every time you need to use that function you simply call the function instead of repeating all the code every time.

推荐答案

不，每次你需要使用该函数，你只需调用函数，而不是每次都重复所有的代码。您不能从另一个引用一个规则集。

No, you cannot reference one rule-set from another.

但是，您可以在样式表中的多个规则集上重用选择器和选择器（通过使用逗号分隔它们）。

You can, however, reuse selectors on multiple rule-sets within a stylesheet and use multiple selectors on a single rule-set (by separating them with a comma).

.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元素一个空格分隔的列表）。

You can also apply multiple classes to a single HTML element (the class attribute takes a space separated list).

<div class="opacity radius">

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

Either of those approaches should solve your problem.

如果您使用描述为什么为什么的元素应该是样式，而不是如何样式的类名可能会有帮助。保留样式表中的如何。

It would probably help if you used class names that described why an element should be styled instead of how it should be styled. Leave the how in the stylesheet.

这篇关于是否可以引用另一个CSS规则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！