CSS 覆盖规则和特殊性答案

【问题标题】：CSS override rules and specificityCSS 覆盖规则和特殊性
【发布时间】：2012-07-01 02:03:17
【问题描述】：

我经常对 CSS 覆盖规则感到困惑：一般来说，我意识到更具体的样式表会覆盖不太具体的样式表，而具体性取决于指定了多少选择器。还有 !important 关键字，它也起作用。

所以，这是一个简单的例子：我有一个包含两个表格单元格的表格。表格本身有一个 CSS 规则，适用于表格中的所有单元格。但是，第二个表格单元格有它自己的规则，应该覆盖通用表格规则：

<html>
<head>
<style type = "text/css">

table.rule1 tr td {
    background-color: #ff0000;
}

td.rule2 {
    background-color: #ffff00;
}

</style>

</head>
<body>
    <table class = "rule1">
        <tr>
            <td>abc</td>
        </tr>
        <tr>
            <td class = "rule2">abc</td>
        </tr>
    </table>
</body>
</html>

但是...当我在浏览器中打开它时，我看到 rule2 并没有覆盖 rule1。好的 - 所以我想我需要让rule2 更“具体”，但我无法真正定义任何进一步的选择器，因为我只想将它应用于特定的表格单元格。所以，我尝试输入 ! important 关键字，但这也不起作用。

如果我将文本节点包装在 <div> 中，我可以覆盖 rule2，例如：

        <td class = "rule2"><div>abc</div></td>

...然后让 CSS 规则更具体：

td.rule2 div {
    background-color: #ffff00; !important
}

这行得通，但这不是我想要的。一方面，我想将规则应用于 表格单元格，而不是 DIV。这会有所不同，因为您仍然可以看到 rule1 的背景颜色作为 div 周围的边框。

那么，我需要做什么来告诉 CSS 我希望 rule2 覆盖 rule1 的 td 元素？

【问题讨论】：

标签： html css

【解决方案1】：

要使第二条规则具有更高的特异性，您始终可以使用第一条规则的部分内容。在这种情况下，我会从规则一中添加table.rule1 tr并将其添加到规则二中。

table.rule1 tr td {
    background-color: #ff0000;
}

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

一段时间后，我发现这很自然，但我知道有些人不同意。对于这些人，我建议查看LESS 或SASS。

【讨论】：

此外，如果您需要让所有表都可以访问“rule2”，则可以省略“rule1”。例如：表 tr td.rule2 {背景颜色：#ffff00;}

【解决方案2】：

特异性是根据规则中 id、class 和 tag 选择器的数量计算的。 Id 具有最高的特异性，然后是类，然后是标签。您的第一个规则现在比第二个更具体，因为它们都有一个类选择器，但第一个规则也有两个标签选择器。

要使第二个覆盖第一个，您可以通过添加其父母的信息来更具体：

table.rule1 tr td.rule2 {
    background-color: #ffff00;
}

Here 是一篇关于选择器优先级的详细信息的好文章。

【讨论】：

不是内联样式，即
Hello
@NicholasKing：是的，我认为!important 的优先级更高。
既然你提到了特异性，我找到了这个CSS Specificity Calculator

【解决方案3】：

重要的需要在里面;

td.rule2 div {     background-color: #ffff00 !important; }

事实上我认为这应该覆盖它

td.rule2 { background-color: #ffff00 !important; }

【讨论】：

虽然!important 有效，但我强烈建议不要使用它。在我看来，这有点“hacky”，并且在项目的后期经常会让你感到困惑。我唯一一次使用它是当我迫切需要覆盖内联 css 时，在这种情况下没有其他选择。最好熟悉选择器优先级。
那是真的，我用它来覆盖 sharepoint 等项目的内联样式。
@PerSalbark 我的回答更直接地回答了为什么代码不起作用，而不是使用选择器的最佳方式，因为我个人认为您的解决方案是实现目标的最佳方式
Hrmpf。作为一名 C/C++ 程序员，我将“！important”读作“不重要”，而它的意思恰恰相反：“非常重要” ....