css - 「n番目の子」セレクターが「ホバー」よりも優先される理由を誰かが説明できますか?

Question

昨日、私はこれに遭遇しました:私の状態の1つが:hover機能しなくなりました。これを変更すると、次のことがわかりました。

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

これに：

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

それは再び機能します。

両方のケースを示すために、jsfiddle でデモを作成しました。

:hover-state がセレクターによって上書きされる理由を誰かが説明できますか?

Answer 1

セレクターは同じ特異性を持っているため、最後に来るセレクターが優先されます。

Answer 2

等しい特異性をオーバーライドするには、セレクターをチェーンできます

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