昨天我遇到了这个问题:我的一个:hover
状态停止工作。我发现如果我改变这个:
div.item {}
div.item:hover {}
div.item:nth-child(even) {}
对此:
div.item {}
div.item:nth-child(even) {}
div.item:hover {}
它再次起作用。
我在 jsfiddle 上创建了一个演示来展示这两种情况。
有人可以解释一下,为什么:hover
选择器会覆盖 -state 吗?
昨天我遇到了这个问题:我的一个:hover
状态停止工作。我发现如果我改变这个:
div.item {}
div.item:hover {}
div.item:nth-child(even) {}
对此:
div.item {}
div.item:nth-child(even) {}
div.item:hover {}
它再次起作用。
我在 jsfiddle 上创建了一个演示来展示这两种情况。
有人可以解释一下,为什么:hover
选择器会覆盖 -state 吗?
选择器具有相同的特异性,所以最后一个优先。
要覆盖相同的特异性,您可以链接选择器
div.container_2 > div:nth-child(even):hover {
background: red;
}