为什么当我为 table 的特定 class 添加规则时所有 table 的规则都被禁用？

Question

用一个例子更好地解释：

我有 2 个 table，其中一个 class:

<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 个规则用于 table 行。我希望 "letters" table 有红色行，没有 class 的 table 有蓝色行。我还希望所有 table 中的所有行在鼠标悬停在它们上方时以黄色突出显示。因此这些规则：

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

但是，悬停规则仅适用于第一个 table（没有 class 的那个），而不适用于 "letters" table。如果我删除第三条规则，那么，正如预期的那样，两个 table 都有蓝色行，并且黄色突出显示有效。

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

将所有 table 行的背景色设为蓝色
将所有 table 行的悬停颜色设为黄色
将 class "letters" 的 table 中所有 table 行的背景颜色设置为红色（覆盖此 table 的规则 #1 class)

那么为什么规则 #3 的存在会使规则 #2 停止工作？我不是在说 "letters" table 行的悬停伪 class，那么为什么不适用所有 table 的一般规则？

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 也可以帮助您更好地了解情况。请注意 class 和伪 class 如何为选择器提供相同的特异性，这就是为什么一个会覆盖另一个。

Answer 2

您的 CSS 规则的顺序需要反转。有时渲染的顺序可能会导致一些问题所以你认为更重要的规则不能被覆盖并且在其他规则之后。

改变它们的顺序可以正常工作。

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

这里是fiddle。

为什么当我为 table 的特定 class 添加规则时所有 table 的规则都被禁用？

Why are rules for all tables disabled when I add a rule for a particular class of table?

html

css

css-selectors

pseudo-class