是否可以在另一个中引用一个 CSS 规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4060405/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to reference one CSS rule within another?
提问by Jake
For example if I have the following HTML:
例如，如果我有以下 HTML：
<div class="someDiv"></div>
and this CSS:
和这个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.
就像在脚本语言中一样，您拥有经常使用的通用函数，这些函数通常写在脚本的顶部，每次需要使用该函数时，您只需调用该函数，而不是每次都重复所有代码。
采纳答案by Quentin
No, you cannot reference one rule-set from another.
不，您不能从另一个规则集引用一个规则集。
You can, however, reuse selectors on multiple rule-sets within a stylesheet anduse 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;
}
You can also apply multiple classes to a single HTML element (the class attribute takes a space separated list).
您还可以将多个类应用于单个 HTML 元素（类属性采用空格分隔的列表）。
<div class="opacity radius">
Either of those approaches should solve your problem.
这两种方法中的任何一种都应该可以解决您的问题。
It would probably help if you used class names that described whyan element should be styled instead of howit should be styled. Leave the howin the stylesheet.
如果您使用类名来描述为什么应该设置元素样式而不是应该如何设置样式，这可能会有所帮助。将how留在样式表中。
回答by adamse
You can't unless you're using some kind of extended CSS such as SASS. However it is very reasonable to apply those two extra classes to .someDiv.
除非您使用某种扩展 CSS，例如SASS ，否则您不能。然而，将这两个额外的类应用到.someDiv.
If .someDivis unique I would also choose to give it an id and referencing it in css using the id.
如果.someDiv是唯一的，我也会选择给它一个 id 并使用 id 在 css 中引用它。
回答by eggmatters
If you're willing and able to employ a little jquery, you can simply do this:
如果你愿意并且能够使用一点 jquery，你可以简单地这样做：
$('.someDiv').css([".radius", ".opacity"]);
If you have a javascript that already processes the page or you can enclose it somewhere in <script> tags. If so, wrap the above in the document ready function:
如果您有一个已经处理该页面的 javascript，或者您可以将其包含在 <script> 标签中的某处。如果是这样，请将上述内容包装在文档就绪函数中：
$(document).ready( function() {
$('.someDiv').css([".radius", ".opacity"]);
}
I recently came across this while updating a wordpress plugin. The them has been changed which used a lot of "!important" directives across the css. I had to use jquery to force my styles because of the genius decision to declare !important on several tags.
我最近在更新 wordpress 插件时遇到了这个问题。它们已被更改，在整个 css 中使用了很多“！重要”指令。由于天才决定在几个标签上声明 !important ，我不得不使用 jquery 来强制我的样式。
回答by Robert Wolf
You can easily do so with SASS pre-processorby using @extend.
您可以通过使用 @extend 使用SASS 预处理器轻松完成此操作。
someDiv {
@extend .opacity;
@extend .radius;
}
Ohterwise, you could use JavaScript (jQuery) as well:
Ohterwise，您也可以使用 JavaScript (jQuery)：
$('someDiv').addClass('opacity radius')
The easiest is of course to add multiple classes right in the HTML
最简单的当然是在 HTML 中添加多个类
<div class="opacity radius">
回答by punkrockbuddyholly
Just add the classes to your html
只需将类添加到您的 html
<div class="someDiv radius opacity"></div>
回答by Seiddjavad Sadati
I had this problem yesterday. @Quentin's answer is ok:
我昨天遇到了这个问题。@Quentin 的回答没问题：
No, you cannot reference one rule-set from another.
but I made a javascript function to simulate inheritance in css (like .Net):
但我做了一个 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;
}and equivalent css:
和等效的CSS：
.test {
background-color: yellow;
}
.productBox, .imageBox {
--inherits: .test;
display: inline-block;
}and equivalent HTML :
和等效的 HTML ：
<div class="imageBox"></div>I tested it and worked for me, even if rules are in different css files.
我测试了它并为我工作，即使规则在不同的 css 文件中。
Update: I found a bug in hierarchichal inheritance in this solution, and am solving the bug very soon .
更新：我在此解决方案中发现了分层继承中的一个错误，并且正在很快解决该错误。
回答by Alex Koz.
You can use var()function.
您可以使用var()函数。
The var() CSS function can be used to insert the value of a custom property(sometimes called a "CSS variable") instead of any part of a value of another property.
var() CSS 函数可用于插入自定义属性（有时称为“CSS 变量”）的值，而不是另一个属性值的任何部分。
Example:
例子：
:root {
--main-bg-color: yellow;
}
@media (prefers-color-scheme: dark) {
:root {
--main-bg-color: black;
}
}
body {
background-color: var(--main-bg-color);
}
