选择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/