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

例如，如果我有以下HTML：

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

---

例如，在脚本语言中，通常在脚本顶部编写通用函数，每次需要使用该函数时，只需调用该函数，而不是每次重复所有代码。

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

但是，您可以在样式表中重用多个规则集上的选择器，并在单个规则集上使用多个选择器（通过）

还可以将多个类应用于单个HTML元素（class属性采用空格分隔的列表）

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

---

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

只需将类添加到html中即可

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

---

除非您使用某种扩展CSS，例如。但是，将这两个额外的类应用于

.someDiv

是非常合理的

---

如果

.someDiv

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

如果您愿意并且能够使用一点jquery，您可以简单地执行以下操作：

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

如果您有一个javascript已经在处理该页面，或者您可以将其包含在标记中的某个位置。如果是，请将上述内容包装到document ready函数中：

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

我最近在更新wordpress插件时遇到了这个问题。更改了它们的名称，在css中使用了大量“！important”指令。我不得不使用jquery强制我的风格，因为天才决定声明！在多个标记上很重要。

您可以使用@extend轻松完成此操作

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

Ohterwise，您也可以使用JavaScript（jQuery）：

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

<div class="opacity radius">

---

我昨天遇到了这个问题@昆廷的回答是可以的：

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

但我制作了一个javascript函数来模拟css中的继承（如.Net）：

var继承_数组；
var继承；
继承数组=[]；
数组.from（document.styleSheets）.forEach（函数（样式表，索引）{
from（样式表i.cssRules）.forEach（函数（cssRule i，索引）{
if（cssRule_i.style！=null）{
inherit=cssRule_i.style.getPropertyValue（“--inherits”）.trim（）；
}否则{
继承=”；
}
如果（继承！=“”）{
inherit_array.push（{selector:cssRule_i.selectorText，inherit:inherit}）；
}
});
});
数组.from（document.styleSheets）.forEach（函数（样式表，索引）{
from（样式表i.cssRules）.forEach（函数（cssRule i，索引）{
如果（cssRule_i.selectorText！=null）{
inherit_array.forEach（函数（inherit_i，索引）{
if（cssRule_i.selectorText.split（“，”）.includeMember（inherit_i.inherit.split（“，”）==true）{
cssRule_i.selectorText=cssRule_i.selectorText+，“+继承_i.selector；
}
});
}
});
});您可以使用函数

var（）CSS函数可用于插入一个属性（有时称为“CSS变量”）的值，而不是另一个属性值的任何部分

例如：

：根目录{
--主背景颜色：黄色；
}
@介质（首选颜色方案：深色）{
：根{
--主背景颜色：黑色；
}
}
身体{
背景色：var（--主背景色）；
}
无法更改HTML吗？您只需在
.radius
中添加一个逗号分隔的类列表，如
.radius、.other、.element{/*css*/}
。这将为您节省额外的代码，但可能会降低可读性。可能的重复我不同意，但我需要说明，它不允许我将规则（例如
字段集图例
复制到
标签。图例
）。我理解，但很遗憾。@rishta-Err…我在回答的第一段中说过。你也可以为只有两个类的元素声明一个规则集，如下所示：
.someDiv.other{/*style…*/}
这样，只有同时有两个类的元素才会受到影响
someDiv {
    @extend .opacity;
    @extend .radius;
}

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

<div class="opacity radius">

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