有人可以解释为什么“nth-child”选择器的优先级高于“悬停”吗？

Question

昨天我碰到了这个：我的一个:hover州停止了工作。我发现如果我改变了这个：

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

到此：

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

它再次起作用。

我创建了一个demo on jsfiddle来展示这两种情况。

有人可以解释为什么:hover - 状态会被选择器覆盖吗？

Answer 1

选择器具有相同的specificity，因此最后一个选择器优先。

Answer 2

要覆盖相同的特异性，您可以链接选择器

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