为什么在CSS中:hover会被覆盖？

Question

如果我有这个CSS：

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }

ID下的链接在悬停时始终显示为黑色。我知道使用ID会提供更高的优先级，但是，我没有覆盖:hover选择器，只覆盖了:link选择器，所以悬停不应该显示为红色吗？

Answer 1

即使您将鼠标悬停在链接上，:link伪类也会应用于该链接。由于带有id的样式更具体，因此它会覆盖其他样式。

:hover样式覆盖:link样式的唯一原因是它在样式表中出现得较晚。如果您按以下顺序放置它们：

a:hover { color: red; }
a:link { color: blue; }

:link样式稍后会出现在样式表中，并覆盖:hover样式。当您将鼠标悬停在链接上时，该链接将保持蓝色。

要使:hover样式适用于黑色链接，必须使其至少与:link样式一样具体，并将其放在样式表中的后面：

a:link { color: blue; }
a:hover { color: red; }
#someID a:link { color: black; }
#someID a:hover { color: red; }

Answer 2

这里有一个订单问题，如W3Schools中所述：

注意:在CSS定义中，a:hover必须位于:link和a:visited之后才能生效！！

注意: a:active必须在CSS定义中的:hover之后才能生效！！

http://www.w3schools.com/CSS/css_pseudo_classes.asp