0

不知道标题是不是有点模糊，

但是，假设你有..

.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 的第一个实例。

我希望这是有道理的，对于任何歧义，我深表歉意，并感谢那些在我的其他问题上提供帮助的人。

4

2 回答 2

2

要仅选择最顶层的第一级子级，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 小提琴演示。

请注意，我已经更正了您的 HTML（aul不能是另一个ul（或ol）的直接子代）。

如果您不想或不能给您ul的 anid您可以引用之外的另一个祖先ul（因为第一级li元素将比嵌套li的元素更接近该祖先）：

<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 小提琴演示。

于 2012-04-19T12:20:36.757 回答
0

您展示的特定 CSS 没有在您展示给我们的 HTML 中选择任何内容。前两个规则都需要.topactive，并且在您的 HTML 中不存在。接下来的两个规则都需要.sf-menu，并且也不存在于您的 HTML 中。

如果您只需要对象的第一级子级，>请在规则中使用直接子级指示符。

在您实际向我们展示的 HTML 中，您可以使用此 CSS 选择顶级 ul 的所有第一级 li 元素：

body > ul > li

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

#myTop > li

或者

.myTop > li

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

于 2012-04-19T12:19:42.557 回答