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 回答