有人能解释一下为什么“nth-child”选择器比“hover”具有更高的优先级吗？

Question

昨天我遇到了这个问题：我的一个:hover状态无法正常工作。我发现，如果我更改以下内容：

div.item {}
div.item:hover {}
div.item:nth-child(even) {}

转换为：

div.item {}
div.item:nth-child(even) {}
div.item:hover {}

它再次运作。

我在jsfiddle上创建了一个演示demo，展示了两种情况。

有人能解释一下为什么:hover状态被选择器覆盖吗？

- insertusernamehere

Answer 1

选择器的特殊性相同，因此最后出现的选择器将具有优先权。

- Guffa

---

+1 谢谢，这正是我在寻找的。我以为伪类中仍然存在某种层次结构。 - insertusernamehere

@insertusernamehere：不是的，唯一一个不受通常计算规则限制的伪类是:not()，它会继承其参数的特异性而非自身的特异性。这意味着:not(E)的特异性是E，而不是:not()的特异性。 - BoltClock

@BoltClock 啊，所以至少有一个例外。感谢您提供这个额外的信息。 - insertusernamehere

Answer 2

为了覆盖相等的特定性，您可以链接选择器

div.container_2 > div:nth-child(even):hover {
    background: red;
}​

- Dylan Valade

---

使用 div.item:nth-child(even):hover 就足以增加特异性 - 不需要通过父级选择。 - BoltClock

@BoltClock 谢谢，你说得对。在 fiddle 中将我的放置放在样式的末尾使它看起来更具体。 - Dylan Valade