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

Question

看看这个 fiddle :http://jsfiddle.net/czz2ejfw/1

我的 table 的样式:

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

当我们悬停时，文本颜色应该是红色。事实上，如果您查看开发人员工具，就会发现应该应用红色。但令人难以置信的是，它显示为#669。什么？

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

Answer 1

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

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

如果你想在 tr 悬停时匹配 td，那么你需要在选择器中提及 td(例如用后代组合器)。

tbody tr:hover td {}