Помогите мне понять странное поведение 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. У вас есть какие-либо другие псевдоселектора a в вашем CSS? Если есть селектор, который более специфичен, чем a.nav:hover (например, .header a.nav:hover), он будет переопределять его независимо от его положения в файле.

Answer 2

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

или

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

Если заставить его работать.