如何选择含直接子元素ul的li并移除其列表样式？

你的问题是嵌套列表里，那些直接包含子ul的li会显示项目符号，和子li的符号叠在一起，想要隐藏这类li的符号。你之前尝试的反向选择器ul < li并不存在，这里给你两个可行方案：

方案1：使用CSS :has()伪类（推荐，现代浏览器支持） #

这是最直接的方法，:has()伪类可以精准选中包含直接子元素ul的li，直接去掉它的项目符号：

li:has(> ul) {
  list-style-type: none;
}

这个选择器的意思是：所有直接包含ul子元素的li元素，都会被应用list-style-type: none，从而隐藏自身的项目符号，只保留子列表的符号。

方案2：手动添加类名（兼容性更好） #

如果需要兼容不支持:has()的旧浏览器，可以给这类包含子ul的li手动添加类名，比如has-submenu：

修改后的HTML：

<ul>
  <li>1...</li>
  <li>2...</li>
  <li id="li_3" class="has-submenu">
    <ul>
      <li id="li_3_1">3.1...</li>
    </ul>
  </li>
  <li>4...</li>
</ul>

对应的CSS：

li.has-submenu {
  list-style-type: none;
}

这种方法兼容性拉满，适合需要适配旧版浏览器的场景。

内容的提问来源于stack exchange，提问作者Gaetan L.