"활성"클래스가있는 텍스트 색상

Question

탐색 모음이 있으며 li 요소의 "하위"클래스로 표시된 활성 페이지가 검정 대신 흰색 텍스트로 표시되어야합니다. HTML과 CSS는 다음에서 찾을 수 있습니다 : http://jsfiddle.net/a4hBz/

CSS의 .subactive 선택기에서는 색상을 사용하지만 브라우저에서는 무시됩니다.

.subactive a 
{ 
    color: #fff!important; 

    /**/ 

} 

또는 정의의 specificity을 증가 :

Answer 1

합니다. ID 항상은 표준 태그 이름, 클래스 이름 또는 의사 클래스보다 더 많은 출현율을 보입니다. 간단한 해결책은 나머지 표준 요소와 마찬가지로 "액티브"스타일을 적용하는 앵커 클래스와 관련성이 있습니다. 기본적으로 : 그 스키마 작동하지 않는 경우

.subactive a 

이

#sidenav .subactive a 

될 경우, 당신이 필요하거나 클래스에 #sidenav을 설정하거나 해결 방법이 다른 방법 것입니다. 그런데

---

는, 내가 이전에 언급되었다 스타일의 specificity입니다. 그것은 현재 로선, 당신의 스타일과 같이에서 무게 :

#sidenav a    a=0, b=1, c=0, d=1 -> specificity = 0,1,0,1 
.subactive a   a=0, b=0, c=1, d=1 -> specificity = 0,0,1,1 
#sidenav .subactive a a=0, b=1, c=1, d=1 -> specfiicity = 0,1,1,1 

는 거의 이런 식으로 생각 :

이

(a * 1000) + (b * 100) + (c * 10) + d 

가장 많은 스타일이 승리합니다.

Answer 2

어느 !imporatant를 추가로 인해 CSS는 스타일 "무게"방법에 크게의

http://www.w3.org/TR/CSS2/cascade.html#specificity

Answer 3

내가 중요하지 않은 경우! important를 사용하지 않겠습니다.

그것이 내가 선을

#sidenav a:hover, .subactive a 

#sidenav a:hover, #sidenav .subactive a:link 

에를 교체하고 사용하지 않는 것하는 아래의 코드를 제거 할 작동하게하려면

.subactive a 
{ 
    color: #fff; 
    background-color: #034676; 
} 

작업 예제를 http://jsfiddle.net/a4hBz/1/

에서 확인하십시오.