仅在无序列表中选择父项的正确选择器答案

【问题标题】：Proper selector for selecting parent items only in an unordered list仅在无序列表中选择父项的正确选择器
【发布时间】：2011-04-23 06:41:33
【问题描述】：

我有一个无序列表如下：

<ul id="menu">
    <li><a href="#">Event Overview</a>
        <ul class="sub-menu">
            <li><a href="#">Some Text Here</a></li>
            <li><a href="#">Some Text Here</a></li>
            <li><a href="#">Some Text Here</a></li>
        </ul>
    </li>
    <li><a href="#">About</a>
        <ul class="sub-menu">
            <li><a href="#">Some Text Here</a></li>
            <li><a href="#">Some Text Here</a></li>
        </ul>
    </li>

    <li><a href="#">Blog</a>
        <ul class="sub-menu">
            <li><a href="#">Some Text Here</a></li>
            <li><a href="#">Some Text Here</a></li>
            <li><a href="#">Some Text Here</a></li>
        </ul>
    </li>

    <li><a href="#">Contact</a>
        <ul class="sub-menu">
            <li><a href="#">Some Text Here</a></li>
            <li><a href="#">Some Text Here</a></li>
            <li><a href="#">Some Text Here</a></li>
        </ul>
    </li>

</ul>

我需要选择所有父列表项，而不是子列表项。例如，我需要选择包含“事件概述”的列表项，而不是包含“此处的一些文本”的列表项。

通常，我的选择器如下#menu-nav li，但这会选择所有列表项，包括子项。

什么是合适的选择器？

【问题讨论】：

标签： jquery-selectors css

【解决方案1】：

The Child Selector（提示天使唱歌）：

#menu > li

它只会选择li 元素，它们是#menu 的直接子元素。

【讨论】：

不，不会。以及$('#menu').children() 不会:)
@Dampe，是的：JS Fiddle。其他后代li 元素继承了分配给#menu > li 元素的背景（因为它们是这些元素的后代）。我更新了您的演示，将不同的 #fff、background-color 分配给第二级 li 元素。
@sdleihssirhc：呃……真是个愚蠢的错误。对不起，你是对的。
@Dampe，没问题；如果感觉像是批评，我深表歉意。那不是我的意图（相信我，我犯过，而且可能其他人也犯过更愚蠢的错误......）=）
@David Thomas：Np，我知道我可能并不总是正确的。当有人纠正我并告诉我原因时很好;）