如何在嵌套的無序列表中選擇父李

Question

您可以讓我知道如何使用CSS3選擇器只選擇父李li？如何在下面的菜單導航中的示例中，我如何才能將樣式應用於所有li上水平（父母值的MainMenu）

<ul> 
<li>MainMenu 1 
    <ul class="nav"> 
     <li>SubMenu 1</li> 
     <li>SubMenu 2</li> 
     <li>SubMenu 3</li> 
     <li>SubMenu 4</li> 
    <ul> 
</li> 
<li>MainMenu 2</li> 
<li>MainMenu 3</li> 
<li>MainMenu 4</li> 
</ul> 

感謝您的時間

Answer 1

你必須給一個id要麼父ul，或對包裝了ul的元素，並選擇基於該id，然後覆蓋這些屬性以'重置'後代那些li S的個元素：

#idOfUl​ > li { 
    /* selects first-level li elements */ 
    color: #f00; 
} 

#idOfUl > li li { 
    /* selects the li descendants of the first-level li elements */ 
    color: #000; 
} 
​ 

JS Fiddle demo。

---

編輯 *解決（這個答案在評論）由OP提出的問題：

我[問題] [是]我不能將任何class或id到名單。

鑑於此，我建議乾脆造型所有li元素，然後覆蓋這種風格對於那些從li後裔那些li S，如下：

li { 
    color: #f00; 
} 

li li { 
    color: #000; 
} 
​ 

JS Fiddle demo。

您也可能過分複雜這一點，並使用否定僞選擇器來設置第一級li元素的樣式。實際上，這選擇直接子li元素（S）是一個ul元素的直接孩子就是自己，不是的li元素其他元素的直接子：

*:not(li) > ul > li { 
    color: #f00; 
} 

li li { 
    color: #000; 
} 
​ 

JS Fiddle demo。