如何仅选择父列表项的sub-menu，而非子列表项的sub-menu？

要精准选中直接属于最外层#top-menu下一级列表项的.sub-menu，排除嵌套在更深层级里的同名元素，你可以利用CSS的**直接子选择器（>）**来严格限定选择层级：

#top-menu > li > ul.sub-menu {
  /* 在这里编写你的样式规则 */
}

选择器生效逻辑拆解 #

• #top-menu > li：仅匹配#top-menu元素的直接子级<li>（也就是最外层的列表项），不会选中嵌套在内部的子列表项
• > ul.sub-menu：进一步只匹配上述直接子级<li>的直接子级.sub-menu，完美跳过了那些嵌套在深层<li>里的同名元素

补充：修正HTML结构后的适配方案 #

你的示例HTML里直接在<div id="top-menu">下放置<li>不符合规范（li必须嵌套在ul/ol内），如果实际结构是#top-menu内部有一层最外层<ul>，只需稍微调整选择器：

#top-menu > ul > li > ul.sub-menu {
  /* 样式规则 */
}

JavaScript选择方案 #

如果是用JS获取这些元素，同样可以套用层级逻辑：

const topLevelSubMenus = document.querySelectorAll('#top-menu > li > ul.sub-menu');

这样就能精准拿到你需要的顶层.sub-menu元素啦。

内容的提问来源于stack exchange，提问作者user5486312