Question

请告诉我如何使用CSS3选择器仅选择父li？例如，在下面的菜单导航中，我如何将样式应用于上层的所有li（具有值MainMenu的父级）

<ul>
<li>MainMenu 1
    <ul class="nav">
        <li>SubMenu 1</li>
        <li>SubMenu 2</li>
        <li>SubMenu 3</li>
        <li>SubMenu 4</li>
    <ul>
</li>
<li>MainMenu 2</li>
<li>MainMenu 3</li>
<li>MainMenu 4</li>
</ul>

感谢您的时间

Answer 1

您必须向父id或包含该ul的元素提供ul，并根据该id进行选择，并且然后覆盖这些属性以“重置”那些li s的后代li元素：

#idOfUl > li {
    /* selects first-level li elements */
    color: #f00;
}

#idOfUl > li li {
    /* selects the li descendants of the first-level li elements */
    color: #000;
}

JS Fiddle demo

已编辑 *以解决OP提出的问题（在对此答案的评论中）：

我的[问题]是[我]无法将任何class或id分配给列表。

鉴于此，我建议只设置所有 li元素的样式，然后覆盖那些来自li的{{1}}的样式，如下：

li

JS Fiddle demo

您也可能过度复杂化，并使用否定伪选择器设置第一级li { color: #f00; } li li { color: #000; }元素的样式。实际上，这会选择直接子li元素，这些元素是li元素的直接子元素，它本身就是元素的直接子元素，而不是和{ {1}}元素：

ul

JS Fiddle demo

如何在嵌套无序列表中选择父li

1 个答案: