Question

我经常对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中，我可以覆盖<div>，例如：

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

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

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

这很有效，但这并不是我想要的。首先，我想将规则应用于表格单元格，而不是DIV。它有所不同，因为你仍然可以看到rule1的背景颜色作为div周围的边框。

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

Answer 1

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

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

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

过了一会儿，我觉得这很自然，但我知道有些人不同意。对于那些人，我建议您查看LESS或SASS。

Answer 2

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

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

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

Here是一篇很好的文章，有关选择器优先级的更多信息。

Answer 3

重要的是需要进入;

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

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

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

CSS覆盖规则和特异性

3 个答案: