CSS选择器优先级 - 为什么td高于伪选择器？

Question

看看这个小提琴：http://jsfiddle.net/czz2ejfw/1

我桌子的样式：

td {
    color: #669;
}
tbody tr:hover {
    color: red;
}

当我们悬停时，文字颜色应为红色。实际上，如果您查看开发人员工具，您会看到应该应用红色。但令人难以置信的是，它显示为＃669。 WTH？

这在Firefox，Chrome，Safari和Opera中都是一致的。

Answer 1

它不是更具体。它匹配不同的元素。

td { color: #669; }会覆盖默认样式表（可能类似于td { color: inherit; }），因为作者样式表会覆盖浏览器样式表。

如果您希望在td悬停时匹配tr，则需要在选择器中提及td（例如，使用后代组合子）。

tbody tr:hover td {}

Answer 2

<tr>正在获取color:red;，但没有任何内容可以设置为红色。

相反，您需要执行此操作，将红色应用于作为父<td>子项的所有<tr>个单元格：

tbody tr:hover {
    background-color: yellow;
}

tbody tr:hover td {
    color: red;
}

<强> JS Fiddle Demo

Answer 3

正如评论中实际已经说过的那样，td是tr的孩子，所以尽管tr的背景发生了变化，但如果你无法在任何地方看到它，没有td是透明的，你不会得到任何地方。因此，正确的解决方案是创建td的{​​{1}}（默认值），而是始终设置transparent的样式，或使用tr覆盖样式tr:hover td{}而非样式化td。

Answer 4

将CSS的那部分更新为此，它将起作用：

tbody tr:hover {
    background-color: yellow;
}
tbody tr:hover td{
    color: red;
}

红色在您的版本中具有更高的优先级，因为它特定于td tbody tr不是特定的