CSS Child Selector

Question

나는 아이와 후손 사이의 차이점을 잘 알고 있습니다. 그러나 자식 선택기에 문제가 있습니다. 아마도 나는 정확하게 뭔가를 이해하지 못하고 있습니다. 다음 HTML을 예로 들어 보겠습니다. 이것은 3 단계 탐색 메뉴입니다. CSS에서

<div id="nav"> 
    <ul class="menu"> 
     <li><a href="#">Menu Item 1</a></li> 
     <li><a href="#">Menu Item 2</a> 
      <ul class="sub-menu"> 
       <li><a href="#">Sub Menu Item 1</a></li> 
       <li><a href="#">Sub Menu Item 2</a> 
        <ul class="sub-menu"> 
         <li><a href="#">Sub Sub Menu Item 1</a></li> 
         <li><a href="#">Sub Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Sub Menu Item 3</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Sub Menu Item 3</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Menu Item 3</a></li> 
    </ul> 
</div> 

가 자녀에 대한 이해를 바탕으로 (>) 선택, 다음과 같은 사실이 될 것이다 :

#nav {} 
#nav ul.menu {} 
#nav ul.menu > li {} /* main navigation items only */ 
#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */ 
#nav ul.menu > li > ul.sub-menu ul.sub-menu {} /* the 3rd tier only */ 

이 그러나 사건이 될 것 같습니다하지 않습니다. 두 번째 계층의 CSS는 세 번째 계층에도 적용됩니다. 그리고 !important 선언으로 만 마지막 CSS 정의 내에서 두 번째 계층을 덮어 쓸 수 있습니다.

의미가 있습니까?

Answer 1

nav ul.menu > li {} /* main navigation items only */ 

올바른

#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */ 

잘못된 - 당신은 아이 ul.sub-menu, 그 아래 모든 li 요소를 가지고있는 ul.menu 아이 li을 선택합니다. 당신이 해당 레벨로 제한하려면

, 이것을 사용 :

#nav ul.menu > li > ul.sub-menu > li {} 

마지막

#nav ul.menu > li > ul.sub-menu ul.sub-menu {} 

잘 한 만 3 개 계층에 보관으로 작동합니다.

Answer 2

#nav ul.menu > li > ul.sub-menu li {} 

은 2 단계 이상에 적용됩니다.

#nav > ul.menu > li > ul.sub-menu > li {} 

는 ... 단지 2 층에 적용된다

Answer 3

#nav ul.menu > li > ul.sub-menu li {} // 두 번째 계층

마지막 ul.sub-menu li 선택은 선택

모두 아이 2 층에서li 요소와 decendantli.

#nav ul.menu > li > ul.sub-menu > li {} //은 'E> F'선택기에 대한 지원이 당신을 위해 문제가되지 않을 수 있습니다 IE6에 약간의 버그입니다 http://www.evotech.net/blog/2008/05/browser-css-selector-support/에 따르면, 제 2 계층 또한

에 제한을 강제 할 수도 있습니다.