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

【问题标题】：Why does a:hover get overriden in CSS?为什么 a:hover 在 CSS 中会被覆盖？
【发布时间】：2010-10-17 14:56:00
【问题描述】：

如果我有这个 CSS：

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

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

【问题讨论】：

【解决方案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; }

【讨论】：

感谢您的信息。我实际上决定在原始悬停上使用 !important 规则来覆盖以后的规则。这让我不必添加 #someID a:hover { color: red; } 每次链接被覆盖。

【解决方案2】：

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

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

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

【讨论】：