为啥 a:hover 在 CSS 中会被覆盖？

Posted 2023-05-08

【中文标题】为啥 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 定义中，以便 有效！！

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

【讨论】：

重新排序样式不足以使 :hover 对黑色链接起作用。

可能不完整（在 CSS 中也必须具有相同的优先级），但一点也不错。此行为在 W3C 标准中有所描述。