57

我经常对 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关键字，但这也不起作用。

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

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

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

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

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

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

4

3 回答 3

76

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

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

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

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

于 2012-06-29T14:27:09.497 回答
17

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

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

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

这是一篇不错的文章，了解有关选择器优先级的更多信息。

于 2012-06-29T14:24:12.310 回答
6

重要的需要在里面；

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

事实上我相信这应该覆盖它

td.rule2 { background-color: #ffff00 !important; }
于 2012-06-29T14:21:55.660 回答