css - 添加 CSS 类作为样式

Question

有没有办法在外部样式表中引用另一个类？以我的代码为例。假设我想在按钮悬停时将其变为红色；我知道我可以只使用背景:#fff，但是有没有办法可以使用另一个类作为此选择器的样式？ (没有 JavaScript，只有 css 和/或 html)

.red {
    background: #f00;
}
button {
    background: #000;
}
button:hover {
    /* Reference another class */
    .red; ???
}

编辑:我想要 button继承 red 的样式当鼠标悬停在类上时。

Answer 1

如果没有任何预处理器(例如Less)，目前这是不可能的。 。然而，有一个相当新的提议implement CSS variables在遥远的 future 的某个时间。但目前，使用纯 CSS 还无法实现这一点。您现在可以做两件事:

1。使用预处理器

您可以使用预处理器，例如 LESS或SCSS 。在 LESS 的情况下，您需要使用 mixins ，在 SCSS 中您需要 extend the existing class 。 CSS 预处理器还有更多，但这些是最流行的。

您使用的语法与 Less 中所需的语法完全相同。

SCSS demo , LESS demo

2。使用 JavaScript

如果您在自己无法轻松访问的服务器上运行站点，或者您有任何其他原因无法安装此类预处理器，则可以使用 JavaScript 作为替代方案。您必须运行一个脚本来扫描所有类的应用样式。这可行(基于 this SO answer )，但是 do watch out with cross-domain rules .

function applyRules(from, to) {
    var sheets = document.styleSheets;
    var re = new RegExp('(^|,)\\s*'+from+'\\s*(,|$)');
    var rules, curr;
    var styles = '';
    for (var i=0;i<sheets.length;i++) {
        rules = sheets[i].rules || sheets[i].cssRules;
        for (var j=0;j<rules.length;j++) {
            if (re.test(rules[j].selectorText)) {
                curr = rules[j].cssText || rules[j].style.cssText;
                styles += ';' + curr.substring(curr.indexOf('{')+1, curr.indexOf('}'));
            }
        }
    }
    var sheet = document.createElement('style');
    sheet.type = 'text/css';
    sheet.innerHTML = to + '{' + styles + '}';
    document.head.appendChild(sheet);
    return sheet;
}
applyRules('.red', 'button:hover');

Demo .

这将在所有可访问的样式表中搜索选择 .red 的样式，并将这些样式应用于 button:hover。