如何用CSS选择器定位非<li>元素后代的<li>元素？

问题背景 #

给定这段HTML结构：

<body>
  <ul>
    <li>First</li>
    <li>
      <ul>
        <li>A</li>
        <li>B</li>
      </ul>
    </li>
    <li>Second</li>
  </ul>
</body>

我们需要选中所有不属于任何<li>元素后代的<li>——也就是示例里的<li>First</li>、带子列表的那个<li>，还有<li>Second</li>。要是你实际只想选没有子列表的顶级<li>，后面有额外说明。

为啥之前的选择器会出错 #

你试的:not(li) li之所以把<li>A</li>和<li>B</li>也选上了，是因为这个选择器的逻辑是“选父元素不是<li>的所有<li>”。嵌套的<li>直接父元素是<ul>，<ul>不是<li>，自然就被误选了，完全不符合我们的需求。

正确的选择器 #

li:not(li li) {
  /* 这里写你的样式声明 */
}

原理解释 #

• 先通过li选中页面里所有的<li>元素；
• 再用:not(li li)排除掉那些被其他<li>嵌套的<li>。li li匹配的就是所有嵌套在<li>里面的子<li>，取反之后剩下的就是父级链里没有<li>的顶级<li>。

额外需求处理（只选无嵌套子列表的顶级

） #

要是你实际需要的是示例里的<li>First</li>和<li>Second</li>（也就是没有子<ul>/<li>的顶级<li>），可以用:has()伪类（注意需要浏览器支持）：

li:not(:has(> ul)) {
  /* 这里写你的样式声明 */
}

这个选择器会把包含直接子元素<ul>的<li>排除掉，只留下没有子列表的顶级项。

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