CSS 질문 - 특이성 및 중재

Question

왜 following codeworld은 빨간색이 아닌 파란색입니까?

.my_class의 특이성 0,0,1,0이지만 높을 (0,1,0,0)는 특이 #my_id 색을 상속한다.

HTML :

<p id='my_id'> 
    Hello 
    <span class='my_class'> 
     world 
    </span> 
</p> 

CSS : 그것은 특이 위치에 따라 간다

#my_id { 
    color: red; 
} 

.my_class { 
    color: blue; 
} 

Answer 1

참조 : w3c: 6 Assigning property values, Cascading, and Inheritance - 6.2 Inheritance

는 값이 다른 스타일 선언이 요소에 직접 적용되지 않은 경우에만 요소 에 대해 적용됩니다 물려 받았다.

#my_id { 
    color: red; 
} 

을 ... 그리고 그 color 속성이 달리 지정되지 않은 class="my_class"에만 경우 필요에 중첩 요소에 (상속) 적용됩니다

이 스타일은 id="my_id"과 요소에 적용됩니다. 더 이상 사건이다

... 당신이 선언되면 :

.my_class { 
    color: blue; 
} 

Answer 2

. 클래스는 텍스트에 직접 적용되지만 ID는 멀리 떨어져 있습니다. 에 관계없이 경우의 스타일 더 많은 지역 다음이 적용 부모에있는 경우 http://monc.se/kitchen/38/cascading-order-and-inheritance-in-css

Answer 3

그것을 생각하는 간단한 방법은, 특이도 순서는, 동일한 수준에서 을 적용 긴 설명은

조상은 더 특이성이 높은 스타일을 가지고 있습니다 (멀리 떨어져 있거나 덜 지역적이기 때문에).

Answer 4

좋은 질문입니다. 그 이유는 iiuc가 상속 때문이며 특이성 때문이 아닙니다.

스팬에 해당 클래스가 없으면 부모로부터 빨간색을 상속받습니다 <p> 요소와 "world"가 빨간색입니다. 하지만 상속 때문입니다.

클래스를 통해 스팬에 대한 색을 설정하면 상속 된 값이 재정의됩니다.

특정 성은 여러 경쟁 규칙에서 어떤 규칙을 사용할 것인지 결정하는 데 사용됩니다. 귀하의 예에서는 <span>에 대한 경쟁 규칙이 없으므로 특수성이 적용되지 않습니다. 그러나, 당신은 당신의 스타일이 추가 :

#my_id span {color: orange} 

당신이 "세계"때문에 클래스 이상되는 ID의 특이성의 오렌지 것을 볼 것입니다.