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

Question

如果我有这个 CSS：

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

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

score 11 · Accepted Answer

: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; }

score -2 · Accepted Answer

正如 W3Schools 中所解释的，存在顺序问题：

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

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

2 回答 2