添加CSS类作为样式[重复]答案

【问题标题】：Adding CSS class as a style [duplicate]添加CSS类作为样式[重复]
【发布时间】：2014-07-05 10:31:37
【问题描述】：

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

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

编辑：我希望 button 在悬停时继承 red 类的样式。

【问题讨论】：

不，但是有无数种方法可以达到相同的结果。您可能还对 LESS/SASS 之类的预处理器感兴趣。
看到这个帖子：stackoverflow.com/questions/10483323/…
看看像LESS这样的CSS预处理器：lesscss.org
我不确定我是否理解你的问题，但可以试试这个.red:hover { background: #whatever; }
是的，我发现这个问题很难说。也许这就是为什么我很难找到答案。

标签： css css-selectors

【解决方案1】：

如果没有任何预处理器，例如Less，目前这是不可能的。然而，在遥远的未来某个时候，implement CSS variables 会有一个全新的提议。但目前，使用纯 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。

【讨论】：

这与父选择器无关，除非您将该问题中使用的术语的含义与某些预处理器语言的文档中使用的术语混淆了。
@BoltClock 问题涉及使用 CSS 选择器遍历 DOM 树。
不，它没有。它涉及将一条规则中的样式应用于另一条规则。
我刚刚注意到您编辑了问题。您完全误解了这个问题；提问者随后的编辑证实了这一点。如果问题实际上是 DOM 遍历或根据另一个元素的状态修改其他元素，那么您的答案将适用，但事实并非如此。
@BoltClock 对不起。 OP 的编辑确实很清楚，但我编辑的是我（当时）确信 OP 的意思。我为我造成的混乱感到抱歉。我应该做些什么来解决它？

【解决方案2】：

纯 CSS 不能做这样的事情。

检查http://lesscss.org/：使用 LESS 你可以做到这一点

.red {
    background: #f00;
}
button {
    background: #000;
}
button:hover {
    .red;
}

或

@red = #f00; /* In LESS you can define variables with @ */
button {
    background: #000;
    &:hover { /* the &:hover means the :hover event of the parent (which is button). In this case that means button:hover */
        background: @red; /* get the varriable @red */
    }
}

【讨论】：