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：悬停必须在：链接之后   和a：在CSS定义中访问过   为了有效!!

注意：a：主动必须在a：hover之后   在CSS定义中为了   有效!!