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是否仅选择“example”，就像我当前的代码一样，我不能只选择第一级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之外的另一个祖先（自第一级{{ 1}}元素将比嵌套的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中，您可以使用此CSS选择顶级ul的所有第一级li元素：

body > ul > li

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

#myTop > li

或

.myTop > li

将myTop类或ID放在顶级UL元素上的位置。

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

2 个答案: