css的子選擇：第一胎，但選擇有針對性的選擇所有兒童

Question

不知道標題是有點含糊不清或沒有，

但是，假設你有..

.topactive a:focus, .topactive a:hover, 
.sf-menu a:active:first-child, .sf-menu li.sfHover:first-child { 
} 

和在你的html中你看：

所有的ul和li類聲明;

<ul class="sf-menu"> 
<li class="current"> 
<p class="topactive"><a href="#a">About Us</a></p> 
     <ul class="menu2"><li>submenu</li></ul></li> 
    <li>something</li> 
     <ul><li>submenu</li></ul> 
</ul> 

我需要它只針對最左邊的li。

css是否只選擇「示例」，就像我當前的代碼一樣，並且我不能僅顯式選擇第一級ul，它只能選擇第一個ul實例。

我希望這是有道理的，抱歉有任何含糊之處，並感謝那些幫助我解決其他問題的人。

Answer 1

要僅選擇頂級ul的一級子女，您需要一些方法來顯式引用祖先和距祖先的距離。我建議使用id：

#idOfTopMostUL > li { 
    /* CSS for the first-level li-elements */ 
} 
#idOfTopMostUL ul li { 
    /* CSS for other li elements, that are children of ul elements within the ul */ 
} 

這就需要HTML如：

<ul id="idOfTopMostUL"> 
    <li>example 
     <ul><li>submenu</li></ul></li> 
    <li>something 
     <ul><li>submenu</li></ul></li> 
</ul> 

JS Fiddle demo。

請注意，我已更正您的HTML（一個ul不能是另一個ul（或ol）的直接子）。

如果你不想或者不能，讓你的ul的id你可以引用另一個祖先ul之外（因爲第一級li元素會比nested- li更接近祖先S）：

<div id="parentDiv"> 
    <ul> 
     <li>example 
      <ul><li>submenu</li></ul></li> 
     <li>something 
      <ul><li>submenu</li></ul></li> 
    </ul> 
</div> 

和CSS：

#parentDiv > ul > li { 
    /* CSS for the first-level li-elements */ 
} 
#parentDiv ul ul li, 
#parentDiv ul li ul li { 
    /* CSS for other li elements, that are children of ul elements within the ul */ 
} 

JS Fiddle demo。

Answer 2

您所展示的特定CSS並未在您向我們顯示的HTML中選擇任何內容。前兩條規則都需要.topactive，並且這不在您的HTML中。接下來的兩條規則都要求.sf-menu，並且這也不存在於您的HTML中。

如果您只想要對象上的第一級子女，請在規則中使用直接子代理>。

在你實際上已經證明我們的HTML，您可以選擇頂級UL與此CSS所有一級li元素：

body > ul > li 

但是，在現實世界中，你可能會指定你的用class和id頂級UL對象和做這樣的事情：

#myTop > li 

或

.myTop > li 

你在哪裏把myTop class或id放在頂層UL元素上。