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

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 中所述：

注意：a:hover 必须位于 a:link 之后
和 a:visited 在 CSS 定义中
为了有效!!

注意：a:active 必须在 a:hover 之后
在 CSS 定义中，以便
有效！！

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