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

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

您必须为idparentul或包装 that 的元素提供 a ul，并基于 that 进行选择id，然后覆盖这些属性以“重置”这些s的后代li元素：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 小提琴演示。

---

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

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

鉴于此，我建议简单地设置所有 li元素的样式，然后为那些li继承自 an 的 s覆盖该样式li，如下所示：

li {
    color: #f00;
}

li li {
    color: #000;
}
​

JS 小提琴演示。

您也可以使这一点过于复杂，并使用否定伪选择器来设置第一级li元素的样式。实际上，这会选择作为元素的直接子li元素的直接子元素，该ul元素本身是元素的直接子元素，而不是li元素：

*:not(li) > ul > li {
    color: #f00;
}

li li {
    color: #000;
}
​

JS 小提琴演示。