Is it possible to reference one CSS rule within another?

For example if I have the following HTML:

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

and this 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.

179414 次浏览
小开
最佳答案

不，您不能从一个规则集引用另一个规则集。

但是，您可以在样式表 还有中的多个规则集上重用选择器，在单个规则集上使用多个选择器(通过 用逗号把它们分开)。

.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 元素(class 属性采用空格分隔列表)。

<div class="opacity radius">

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

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

小开

只需将类添加到您的 html 中

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

除非您使用某种扩展的 CSS，例如 SASS，否则不能这样做。然而，将这两个额外的类应用于 .someDiv是非常合理的。

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

小开

如果您愿意并且能够使用一个小 jquery，您可以简单地这样做:

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

如果您有一个已经处理该页面的 javascript，或者您可以将其封装在 < script > 标记中的某处。如果是这样，将上面的代码包装到文档就绪函数中:

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

我最近在更新 wordpress 插件时发现了这个问题。他们已经改变了，用了很多”！重要的”指令。我不得不使用 jquery 来强制我的样式，因为我做了一个天才的决定: 声明！在几个标签上都很重要。

小开

您可以通过使用@tended 轻松地使用 SASS pre-processor来实现这一点。

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

Ohterwise, you could use JavaScript (jQuery) as well:

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

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

<div class="opacity radius">
小开

“我昨天遇到了这个问题。”昆汀的回答是可以的:

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

但是我做了一个 javascript 函数来模拟 css 中的继承(比如.Net) :

    var inherit_array;
var inherit;
inherit_array = [];
Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
if (cssRule_i.style != null) {
inherit = cssRule_i.style.getPropertyValue("--inherits").trim();
} else {
inherit = "";
}
if (inherit != "") {
inherit_array.push({ selector: cssRule_i.selectorText, inherit: inherit });
}
});
});
Array.from(document.styleSheets).forEach(function (styleSheet_i, index) {
Array.from(styleSheet_i.cssRules).forEach(function (cssRule_i, index) {
if (cssRule_i.selectorText != null) {
inherit_array.forEach(function (inherit_i, index) {
if (cssRule_i.selectorText.split(", ").includesMember(inherit_i.inherit.split(", ")) == true) {
cssRule_i.selectorText = cssRule_i.selectorText + ", " + inherit_i.selector;
}
});
}
});
});

Array.prototype.includesMember = function (arr2) {
var arr1;
var includes;
arr1 = this;
includes = false;
arr1.forEach(function (arr1_i, index) {
if (arr2.includes(arr1_i) == true) {
includes = true;
}
});
return includes;
}

及相等的 css:

.test {
background-color: yellow;
}


.productBox, .imageBox {
--inherits: .test;
display: inline-block;
}

等效的 HTML:

<div class="imageBox"></div>

I tested it and worked for me, even if rules are in different css files.

Update: I found a bug in hierarchichal inheritance in this solution, and am solving the bug very soon .


提交答案