Question

有没有办法在外部样式表中引用另一个类？以我的代码为例。假设我想把它按住红色，当它悬停在上面时;我知道我可以使用background：#fff，但有没有办法可以使用另一个类作为这个选择器的样式？（没有javascript，只有css和/或html）

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

编辑：我希望button继承red类的样式，并将其悬停在其上。

Answer 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。

Answer 2

纯CSS无法做到这一点。

检查http://lesscss.org/：如果没有，你可以像

那样做

.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 */
    }
}

将CSS类添加为样式

2 个答案:

1。使用预处理器

2。使用JavaScript