Question

用一个例子更好地解释了：

我有2个表，其中一个有一个类：

<table>
    <tr>
        <td>111</td>
        <td>222</td>
        <td>333</td>
    </tr>
    <!--  more rows -->
</table>

<table class="letters">
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
    <!--  more rows -->
</table>

我有3个表行规则。我希望“letters”表有红色的行，而没有类的表有蓝色的行。我还希望所有表中的所有行在鼠标悬停时以黄色突出显示。因此这些规则：

table tr {
    background-color: #33CCFF;
}
table tr:hover {
    background-color: #FAF3B1;
}
table.letters tr {
    background-color: #FF8888;
}

但是，悬停规则仅适用于第一个表（没有类的表），而不适用于“字母”表。如果我删除第3个规则，那么，正如预期的那样，两个表都有蓝色行，黄色突出显示有效。

当我有3条规则时，他们似乎在说：

将所有表格行的背景颜色设为蓝色
将所有表格行的悬停颜色设为黄色
将“letters”类的表中所有表行的背景颜色设置为红色（覆盖此类表的规则＃1）

那么为什么规则＃3的存在使规则＃2停止工作？我没有说“字母”表行的悬停伪类，为什么不适用所有表的一般规则？

Answer 1

这实际上是CSS选择器相互重写的情况 - 第三个规则会覆盖第二个规则。试试重新安排它们：

table tr {
    background-color: #33CCFF;
}
table.letters tr {
    background-color: #FF8888;
}
table tr:hover {
    background-color: #FAF3B1;
}

这是一个JSFiddle来演示。希望这可以帮助！如果您有任何问题，请告诉我。

编辑：这是resource on CSS specificity，也可以帮助您更好地了解情况。注意一个类和一个伪类如何对选择器贡献相同的特异性，这就是为什么一个覆盖另一个。

Answer 2

您的CSS规则的顺序需要颠倒过来。有时它呈现的顺序可能会导致一些问题，因此您认为更重要的规则不得被覆盖并遵循其他规则。

更改顺序时，它可以正常工作。

table.letters tr {
    background-color: #FF8888;
}
table tr:hover {
    background-color: #FAF3B1;
}

这是fiddle。

为特定类表添加规则时，为什么禁用所有表的规则？

2 个答案: