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

如果我有这个CSS:

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

ID下的链接在悬停时始终显示为黑色.我知道使用ID会提供更高的优先级,但是,我不会覆盖:hover选择器,只覆盖选择:link器,所以不应该将鼠标悬停显示为红色？

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