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

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

但是，您可以在样式表中重用多个规则集上的选择器，并且在单个规则集上使用多个选择器（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元素（类属性采用空格分隔列表）。

<div class="opacity radius">

这些方法中的任何一种都可以解决您的问题。

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

Answer 2

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

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

Answer 3

如果您愿意并且能够使用一点点jquery，您可以这样做：

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

如果您有一个已经处理该页面的JavaScript，或者您可以将其封装在＆lt; script＆gt;中的某个位置。标签。如果是这样，请在文档就绪函数中包含上述内容：

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

我最近在更新wordpress插件时遇到了这个问题。它们已被更改，使用了许多重要的＆＃34;整个CSS的指令。我不得不使用jquery强制我的风格，因为天才决定在几个标签上声明！important。

Answer 4

使用@extend可以轻松地使用SASS pre-processor执行此操作。

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

哦，你也可以使用JavaScript（jQuery）：

<div class="opacity radius">

最简单的当然是在HTML

中添加多个类

\w*

Answer 5

只需将类添加到您的html

即可

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

Answer 6

我昨天有这个问题。 @Quentin的答案是可以的：

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>

我测试了它并为我工作，即使规则位于不同的CSS文件中。

更新：我在此解决方案中发现了层次结构继承中的错误，并且即将解决该错误

Answer 7

您可以使用var()功能。

可以使用var（）CSS函数插入custom property的值（有时称为“ CSS变量”），而不是其他属性值的任何部分。

示例：

:root {
  --main-bg-color: yellow;
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: black;
  }
}

body {
  background-color: var(--main-bg-color);
}

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

7 个答案: