本文讲解如何通过 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 的符号，可扩展为：
立即学习“前端免费学习笔记（深入）”；
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 回退。
✅ 最佳实践建议
- 优先使用 ul > ul { list-style: none; } —— 兼容性好（IE9+）、逻辑清晰、零风险；
- 若需保留嵌套 ul 的缩进，可补充 padding-left: 0; 或自定义 margin-left；
- 避免滥用 * { list-style: none; } 等全局重置，应保持语义化层级；
- 如需彻底统一列表样式，建议采用 list-style: none + 自定义 ::before 伪元素生成符号，获得完全控制权。
综上，无需复杂 hack，一行精准选择器即可优雅解决嵌套列表的双符号问题。
