帮我理解奇怪的CSS行为！

Question

奇怪的CSS行为。 当我使用CSS（a.nav：hover，如下例）设置访问颜色时，一旦用户访问链接，悬停就不起作用。但是，当我使用父元素的引用（.header a.nav：hover如下）设置它时，它可以工作。为什么？

a.nav:visited{
color:yellow;
}

/*once the link is visited by user this rule not working*/
a.nav:hover{
color:red;
}

/*if we use this rule it works even after the link is visited*/
.header a.nav:hover{
color:red;
}

<div class="header">
<a class="nav" .. >test </a>
</div>

Answer 1

听起来像specificity问题。你的CSS中还有其他a个伪选择器吗？如果某个选择器比a.nav:hover更具体（例如.header a.nav:hover），则无论其在文件中的位置如何，它都会覆盖它。

Answer 2

a.nav:hover,
a.nav:visited:hover{
color:red;
}

或

a.nav:hover{
color:red !important;
}

应该让它发挥作用。