Css子选择器：first-child，但选择目标选择器中的所有子代

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 元素将更接近那个祖先比嵌套的-lis)：

<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 中，您可以使用此 CSS 选择顶级 ul 的所有第一级 li 元素：

body > ul > li

但是，在现实世界中，您可能会使用类或 id 指定顶级 ul 对象并执行以下操作：

#myTop > li

或

.myTop > li

您将myTop 类或id 放在顶级UL 元素的位置。