내 CSS 선택기에 문제가 있습니까?

Question

div 안에 div가 있습니다. .wrapper은 .level의 부모입니다. 내가 .wrapper와 .level 스타일을 준

<div class="wrapper"> 
    <div class="level"> 
    Engkus Kusnadi 
    </div> 
</div> 

는 선택으로 포함 그것은 잘 작동하고 배경이 녹색으로 변경되었습니다. 내가 스타일을 빨간색으로 만 .level 선택 배경을 추가있을 때

.wrapper .level { 
    background:green; 
} 

은 그러나 문제가 발견, 그 아무것도 일어나지 않습니다.

.wrapper .level { 
    background:green; 
} 

.level { 
    background:red; 
} 

은 여기 내 바이올린 내가 틀렸다 무엇 https://jsfiddle.net/vcb4eqy4/

입니까? CSS 선택기에 상위 레벨이 있습니까?

Answer 1

귀하의 문제는 여기에 있습니다 :

.wrapper .level { 
    background:green; 
} 

.level { 
    background:red; 
} 

.wrapper .level 규칙을 정의하면 .level보다 더 구체적인 규칙을 정의했습니다. 충돌하는 규칙이있는 경우보다 구체적인 규칙이 적용됩니다.

예를 아래와 같이 코드를 변경

당신은 무슨 뜻인지 볼 수 있습니다 : 당신은이 사양에 대한 자세한 내용을 이해하는 this article을 읽을 수

.wrapper .level { 
    background:green; 
} 

div.wrapper .level { 
    background:red; // this is now more 'specific' 
} 

.