하위 선택기가 제대로 작동하지 않습니다 (직접 하위 셀렉터 선택)

Question

왜 내 자식 선택기가 제대로 작동하지 않는지 잘 모르겠습니다. 이 예에서는 직접 <li> 태그 만 빨간색으로 표시됩니다. 하지만 대신 <li> 태그는 모두 빨간색으로 표시됩니다.

이 내 문제의 jQuery를 바이올린입니다 : 선택기가 실제로 일치하지 않는 그래서

http://jsfiddle.net/5Jf4Y/2/

Answer 1

내 생각 엔 모두 당신의 선택자는 같은 특이성 + 컬러 속성이 상속을 가지고있다.

color 속성이 상속됩니다.

설정 먼저 기본 <li> 요소에 대한 색상과는 직접 아이들 .courses > ul > li에 대해 다른 색을 적용 : 나는 데모를 쳐다 보면서 발견

.courses ul li { 
    color: Black; 
    margin-left: 40px; 
}​ 

.courses > ul > li { 
    color: #9E002E; 
    font-size: 20px; 
} 

DEMO

Answer 2

중첩 된 아이들이 부모로부터 색상을 상속합니다. li에 기본 텍스트 색상을 지정하면 문제가 해결됩니다 (CSS 규칙 블록의 순서가 달라 지므로 유의하십시오).

데모 : http://jsfiddle.net/5Jf4Y/6/