html列表嵌套必须将子列表（ul/ol）完整置于li标签内，否则浏览器会自动拆分为并列列表而非嵌套结构；错误写法如项子项会被解析为两个独立列表。
HTML列表嵌套完全合法，但必须写在 li 里；不按规则嵌套，浏览器会自动“修复”结构，结果往往和你写的不一样。
为什么 ul 套 ol 或 ol 套 ul 会失效？
常见错误是把子列表直接写在父 ul 或 ol 标签之间，比如：
- 第一步
- 子步骤1
浏览器解析时会把它“纠正”为：
- 第一步
- 子步骤1
也就是两个并列列表，不是嵌套。正确写法只有一条铁律：
- 子列表（无论
ul、ol还是dl）必须完整写在某个li的开始与结束标签之间 - 嵌套层级本身无限制，但语义上建议不超过 3 层
- 用开发者工具检查 DOM 结构，确认子列表是否真的成了父
li的子节点，而不是同级节点
list-style-type 和缩进异常怎么调？
默认情况下，每嵌套一层，浏览器会给 ul/ol 加约 40px 的 padding-left，多层叠加后缩进过大，看着像错位。
别用 text-indent 修——它只动第一行，对多行 li 没用。推荐做法：
- 统一重置基础样式：
ul, ol { padding-left: 2rem; }，再用子选择器微调：ul ul, ol ul, ul ol { padding-left: 1.5rem; } - 想让子
ol编号变成 “1.1”“1.2”，不能靠 HTML，得用 CSScounter-reset+::before，例如：ol { counter-reset: item; } li { counter-increment: item; } li::before { content: counters(item, ".") ". "; } - 旧版 IE 不支持
counters()，如需兼容，改用固定符号或 JS 补充生成
什么场景该用嵌套列表，什么不该？
嵌套的本质是表达“某一项的展开说明”，不是为了视觉缩进而嵌套。
- 适合：
ol描述操作流程，其中某步含多个并列动作（用ul列出），例如“安装步骤 → ① 下载 → ② 解压 → ③ 配置（可选：数据库配置、缓存配置）” - 不适合：纯导航菜单（如“首页 > 产品 > Web 工具 > 编辑器”），这种应优先用
nav+menu或带aria-current的语义化结构 - 无障碍提示：屏幕阅读器会播报“列表，2 项，子列表，3 项”，嵌套超 3 层易造成理解负担，且每层
li必须有非空文本内容，否则会被跳过
最常被忽略的一点：嵌套是否真由内容逻辑驱动，还是仅仅因为“看起来要缩进”？HTML 结构一旦写错，CSS 很难挽救语义缺陷，后期维护和 a11y 测试都会踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
