Can someone explain why the “nth-child”-selector has a higher priority than “hover”?

问题

Yesterday I ran into this: One of my :hover-states stopped working. I found out that If I change this:

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

to this:

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

it works again.

I've created a demo on jsfiddle to show both cases.

Can somebody explain, why the :hover-state is overwritten by the selector?

回答1:

The selectors have the same specificity, so the one that comes last takes priority.

回答2:

To override the equal specificity you can chain the selectors

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

来源：https://stackoverflow.com/questions/13055578/can-someone-explain-why-the-nth-child-selector-has-a-higher-priority-than-hov