CSS를 사용하여 현재 페이지를 표시하는 방법은 무엇입니까? .current_link not working

Question

현재 페이지 링크를 다른 색상으로 표시하려고합니다. 나는 이것을 할 다른 답변을 찾았지만 여전히 작동하지 않습니다. 각 페이지의 각 링크에서 current_link 클래스를 사용하고 있습니다. 나는 컬러 규칙에! important 태그를 적용한다고 말한 대답을 발견했으나 아무 것도하지 않았다. 나는 내가 뭔가 잘못 생각했거나 내가 모른다고 생각하고있다. 어떤 종류의 주문 규칙 일 수 있습니다. 내 링크와 관련된 CSS 규칙은 다음과 같습니다. 당신이 볼 수 있듯이 맨 위에는 .current_link가 있습니다 (이것은 어떤 주문이나 승차 문제를 제거 할 것이라고 생각했습니다). 상대적인 HTML 이름이 붙습니다.

.current_link { 
    color: #00AD26; 
} 

#main_nav a:link, a:visited { 
    text-decoration:none; 
    color: #00A3E6; 
} 
#main_nav a:hover { 
    text-decoration: none; 
    color: #A8EDFF; 
} 
#main_nav a:active { 
    text-decoration: none; 
    color: #00B7FF; 
} 


a:link, a:visited { 
    text-decoration:none; 
    color: #00A3E6; 
} 
a:hover, a:active { 
    text-decoration: none; 
    color: #00B7FF; 
} 

페이지 중 하나의 HTML입니다.

<ul id="main_nav" class="grid_5 prefix_9"> 
    <li id="home" class="current_link"><a href="index.html">Portfolio</a></li> 
    <li id="about"><a href="about.html">About</a></li> 
    <li id="contact"><a href="contact.html">Contact</a></li> 
</ul> 

Answer 1

당신은 사용한다 : 이것은 다른 선택기를 기각하고 !important를 사용하는 것을 피한다

#main_nav li.current_link a { 
    color: #00AD26; 
} 

.

Answer 2

당신의 .current_link<li> 일치합니다.
<li> 안에있는 <a>은 상위 요소에서 상속되는 색을 재정의합니다.

<a> 자체 색상을 적용하거나 클래스를 이동하거나 <a> 요소가 <li> 안에 있도록 선택기를 변경하여 색상을 적용해야합니다.

또한 하위 규칙이 이전 규칙을 덮어 씁니다 (동일한 특이성을 갖는 경우).

Answer 3

이 시도 :

.current_link a { 
    color: #00AD26 !important; 
}