当我为特定的表类添加规则时，为什么所有表的规则都是禁用的？
当我为特定的表类添加规则时，为什么所有表的规则都是禁用的？
提问于 2015-07-02 15:04:00
用一个例子更好地解释：
小提琴。
我有两张桌子，其中一张有一个类：
<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停止工作呢？我没有提到“字母”表行的悬停伪类，那么为什么所有表的一般规则都不适用呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-07-02 15:08:13
这实际上是CSS选择器相互覆盖的情况--第三条规则覆盖第二条规则。就试着重新安排一下：
table tr {
background-color: #33CCFF;
}
table.letters tr {
background-color: #FF8888;
}
table tr:hover {
background-color: #FAF3B1;
}下面是一个要演示的JSFiddle。希望这能有所帮助！如果你有任何问题，请告诉我。
编辑：这里有一个关于CSS特性的资源，它也可能帮助您更好地理解情况。请注意，类和伪类对选择器的贡献是相同的，这就是为什么其中一个要覆盖另一个。
Stack Overflow用户
发布于 2015-07-02 15:08:14
您的CSS规则的顺序需要颠倒。有时，它呈现的顺序可能会导致一些问题，所以您认为更重要的规则不能被覆盖，而应该是在其他规则之后。
当改变它们的顺序时，它会正常工作。
table.letters tr {
background-color: #FF8888;
}
table tr:hover {
background-color: #FAF3B1;
}这是小提琴。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31188197
复制相关文章
相似问题
腾讯云开发者
