当我为特定类别的表添加规则时，为什么会禁用所有表的规则？答案

【问题标题】：Why are rules for all tables disabled when I add a rule for a particular class of table?当我为特定类别的表添加规则时，为什么会禁用所有表的规则？
【发布时间】：2015-09-20 04:43:33
【问题描述】：

用一个例子更好地解释：

Fiddle.

我有 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 条规则。我希望“字母”表有红色行，没有类的表有蓝色行。我还希望所有表格中的所有行在鼠标悬停时都以黄色突出显示。因此，这些规则：

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

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

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

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

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

【问题讨论】：

如果我理解正确，因为伪类被该类覆盖。这就是我的意思：jsfiddle.net/601v0kf1/1
如果其中任何一个对您有用，请检查此问题的答案

标签： html css css-selectors pseudo-class

【解决方案1】：

这实际上是 CSS 选择器相互覆盖的情况——第三条规则覆盖第二条规则。试着重新排列它们：

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

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

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

【讨论】：

【解决方案2】：

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

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

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

这里是fiddle。

【讨论】：