本文讲解如何通过 css 精准定位含有直接子 ul 的 li 元素，并移除其 list-style-type，避免嵌套列表出现重复项目符号（如双圆点），解决视觉冗余问题。

在嵌套列表中，常见问题如 <li id="li_3"> 本身带有默认项目符号（如圆点），而其内部又包含一个 <ul>，该子列表的 <li id="li_3_1"> 也会渲染自己的符号——结果导致视觉上出现“双符号并排”，破坏层级语义与美观。

你曾尝试使用 ul < li 这类反向选择器，但需明确：CSS 原生不支持“父选择器”或“前驱选择器”（即无法基于子元素反选父元素）。因此，不能直接写“选中有 ul 子元素的 li”。但有成熟、语义清晰且兼容性良好的替代方案：

✅ 推荐解法：重置子 ul 的 list-style，而非修改父 li

最简洁、可靠的做法是对嵌套的 <ul> 本身设置 list-style: none，同时确保其子项仍正常显示符号（因浏览器默认会继承/重置样式）：

/* 移除所有作为直接子元素的 ul 的列表符号（及其默认缩进） */
ul > ul {
  list-style: none;
}

⚠️ 注意：此规则仅作用于 ul 的直接子 ul（即嵌套一层），不会影响更深层级（如 ul > ul > ul），若需全局禁用所有嵌套 ul 的符号，可扩展为：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

立即学习“前端免费学习笔记（深入）”；

ul ul {
  list-style: none;
}

但更推荐前者（ul > ul），因其更精确、避免意外覆盖。

? 为什么不是 li > ul 或 li:has(ul)？

• li > ul { list-style: none; } ❌ 无效：list-style 属于 li 或 ul 自身，作用于 ul 元素时，它控制的是该 ul 容器自身的标记（如方块、圆圈），而非其父 li 的符号。真正需要隐藏的是父 li 的符号，但 CSS 无法直接选中它。
• li:has(> ul) ✅（现代方案）：CSS :has() 伪类（Chrome 105+、Firefox 121+、Safari 15.4+ 支持）可实现“含子 ul 的 li”：

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

  此写法语义准确，但不兼容旧版浏览器，生产环境需谨慎评估支持范围或配合 JS 回退。

✅ 最佳实践建议

1. 优先使用 ul > ul { list-style: none; } —— 兼容性好（IE9+）、逻辑清晰、零风险；
2. 若需保留嵌套 ul 的缩进，可补充 padding-left: 0; 或自定义 margin-left；
3. 避免滥用 * { list-style: none; } 等全局重置，应保持语义化层级；
4. 如需彻底统一列表样式，建议采用 list-style: none + 自定义 ::before 伪元素生成符号，获得完全控制权。

综上，无需复杂 hack，一行精准选择器即可优雅解决嵌套列表的双符号问题。