낮은 특이성 스타일은

Question

위로 마우스를 가져간 대신에 높은 특이성, 적용되는 : 선택기 .wrapper-dropdown .label는, 대신에 높은 특이성 .wrapper-dropdown .dropdown li div.liwrap:hover

이유는 무엇입니까의 적용되는

? 그와 관련이있는 경우 나는, OSX 10.8에서 크롬을 사용하고

-edit

이 Less : http://hastebin.com/feyurojusa.avrasm
이 CSS로 컴파일 : http://hastebin.com/dihimuquju.css

그리고이 Jade : http://hastebin.com/sipetaqigu.vhdl
이 HTML로 컴파일 : http://hastebin.com/sufavolumo.xml

Addtionally 클릭 이벤트를 처리하는 작은 자바 스크립트가 있습니다. http://hastebin.com/sufavolumo.xml

Answer 1

.label으로 지정된 요소는 div.liwrap으로 지정된 요소가 아닙니다. 오히려 .label은 div.liwrap의 자손 중 하나입니다. selector가 다른 요소를 모두 일치시키기 때문에 Specificity는 관련성이 없어집니다.

는

취소 선은 단순히 div.liwrap 조상의 color이 상쇄되는 대신 당신이 .label 자신의 color 선언을 제공하고 있기 때문에 상속되는 것을 의미한다. 당신이 가져가에 div.liwrap에서 상속 .label을 원하는 경우에

, 당신이 당신의 적은 코드에 다음과 같은 규칙을 수정해야합니다

.dropdown li div.liwrap:hover { 
    border-color: #00aeef; 
    color: #00aeef; 
    } 

이 같은 사람 :

.dropdown li div.liwrap:hover { 
    border-color: #00aeef; 
    color: #00aeef; 
    .label { 
     color: #00aeef; // Or color: inherit; 
    } 
    }