第n個孩子只針對兒童

Question

<ul id="main-menu"> 
    <li>111 
     <ul id="sub-menu"> 
      <li>sub-111</li> 
      <li>sub-222</li> 
      <li>sub-333</li> 
      <li>sub-444</li> 
     </ul> 
    </li> 
    <li>222</li> 
    <li>333</li> 
    <li>444</li> 
</ul> 


<style> 
    ul#main-menu li:nth-child(2n) { 
     color: red; 
    } 
</style> 

這是一個演示 http://cssdeck.com/labs/emxvbal4

這影響子項目也！

我怎麼能只針對主菜單裏的不沾裏的子菜單的

Answer 1

使用child combinator（>），而不是descendant one（）：

ul#main-menu > li:nth-child(2n) 

Answer 2

使用直接的孩子選擇器：

#main-menu > li{ 
} 

Answer 3

使用直接的孩子選擇器「>」。

ul#main-menu > li { 
    <your_css_style> 
} 

欲瞭解更多信息，請檢查該LINK。