: 모든 하위 요소를 대상으로하는 첫 번째 자식

Question

ID가 "navigation"인 정렬되지 않은 목록과 몇 개의 하위 목록 항목 요소가 있습니다.

첫 번째 항목을 :first-child으로 선택하려고하는데 다른 모든 목록 항목에이 CSS를 적용하고 있습니다. 그래서

ul#navigation li:first-child{ 
    background:#fff; 
} 

는 반복하는이 모든 목록 항목을 흰색 배경을주고있다. 난 그냥 첫 번째 요소를 선택하고 싶습니다. 무슨 일 이니?

Answer 1

의견에 따르면, 문제는 마크 업이 보이는 것입니다 : 모든 li이 모델 하에서 :first-child 얼마나

<ul id="navigation"> 
    <a href="http://google.com"> 
     <li>Google</li> 
    </a> 
</ul> 

참고. 목록 항목 내에 앵커를 중첩하는보다 적절한 구조를 제안하십시오. 당신은 장소에 그 구조적인 변화가 있으면

#navigation a { display: block } 

것은, 당신의 선택은 목표로한다 : 첨부 CSS와

<ul id="navigation"> 
    <li><a href="http://google.com">Google</a></li> 
</ul> 

: 당신이 앵커가 목록 항목을 입력 할 경우, 블록의 디스플레이를 설정 첫 번째 목록 항목 :

/* > to target only immediate list items */ 
#navigation > li:first-child { 
    background: red; 
}