選擇UL裏的孩子不是孫子

Question

我發現了一個CSS選擇器選擇從父UL孩子裏，而不是孫子李：

parentulid > li 

see here

但是如何選擇一個頂級父同div，嵌套像這樣？

<div id="header"> 
    <ul id="Head"> 
     <li>one</li> 
     <li> 
      two has children 
      <ul> 
       <li>a</li> 
       <li>b</li> 
      </ul> 
     </li> 
     <li> 
      three has children 
      <ul> 
       <li>x</li> 
      </ul> 
     </li> 
    </ul> 
</div> 

這不起作用：

#header > ul li { 
    background-color: rgb(255, 0, 0); 
    border-radius: 0px 0px 10px 10px; 
} 

因爲孫子李受到影響了。

Answer 1

再次使用>，如#header > ul > li。這隻會匹配li s，它們是ul的直系後代，它們是#header的直系後裔。

Answer 2

你需要像這樣再次使用子選擇：

#header > ul > li{ 
    background-color: rgb(255, 0, 0); 
    border-radius: 0px 0px 10px 10px; 
} 

這將選擇所有li元素任何ul元素本身的#header的直接子的直接子。您先前的選擇器#header > ul li選擇#header的直接子女的任何ul的所有li後代（包括嵌套uls）。

基本上，#header > ul li將選擇ANY li即在任何ul即是#header直系後代（子）的DOM中的後繼節點，即使它嵌套在1級或2個或10個以上的子列表。相反，#header > ul > li僅選擇來自#header的立即後代ul元素的立即後代li元素。

Answer 3

你的意思是這樣嗎？

#header > ul > li > ul li{ 
    background-color: rgb(255, 0, 0); 
    border-radius: 0px 0px 10px 10px; 
} 

http://jsfiddle.net/wVMb8/