한 링크에서 호버가 작동하지만 다른 호에서는 작동하지 않는 이유는 무엇입니까?

Question

나는 따라서, 클래스 "menu_top"에서 내 헤더에 두 개의 링크가 있습니다

<a class="menu_top" href="adverteerders.html" >adverteerders</a> 
<a class="menu_top" href="ondernemers.html" >ondernemers</a> 

해당 CSS 코드는 다음과 같습니다

이 코드를 실행하고 adverteerders '내 마우스를 가져

.menu_top { 
    font-size: 14px; 
} 
.menu_top:link {color: #404040;} 
.menu_top:hover {color: #CC0033;} 
.menu_top:visited {color: #404040;} 

'그러면 색상이 변경되지 않습니다. 내가 마우스를 'ondernemers'에 올려 놓으면 이상하게 바뀝니다. 그래서 제가 한 것은 ondernemers의 정확한 코드를 복사 한 다음 다시 작동하는 것처럼 보였습니다. 이제 'ondernemers'를 'adverteerders'로 다시 작성하면 다시 작동하지 않습니다. 그러나 oadverteerders.html을 입력하면 호버가 작동합니다.

도대체 무슨 일이 벌어지고있는거야?

Answer 1

CSS 선택기의 순서가 중요합니다. 요소가 동일한 특이성을 가진 여러 CSS 선택기와 일치하면 나중에 정의 된 선택기가 이전 선택기를 재정의합니다.

그래서 당신은:hover 의사 클래스 후 :visited 의사 클래스 를 사용하는 경우, 다음 :visited 스타일은 :hover 스타일을 통해 전례을 어디 충돌을 무시합니다.

일반적으로 :visited 이후에 :hover 및 :active 스타일을 정의하려고합니다.