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元素上。