如何通过HTML实现复杂的多级列表嵌套效果？

本文共计803个文字，预计阅读时间需要4分钟。

浏览器显示两个独立的标签

<ol> 必须严格嵌套在 <li> 内部才能延续编号

这是唯一能实现 A. → B. → 1. → a. 连续逻辑的写法。子 <ol> 不是挂在父 <ol> 下，而是必须作为某个 <li> 的直接子内容存在。

• 外层 <ol type="A"> 包裹所有一级条目
• 每个一级条目用 <li> 包裹文字 + 子 <ol>
• 第二级用 <ol type="1">，第三级用 <ol type="a">，依此类推
• 不能把子 <ol> 放在 <li> 外、</ol> 内 —— 位置错，语义就失效

<ol type="A"> <li>A. First section <ol type="1"> <li>1. Sub-point <ol type="a"> <li>a. Detail</li> <li>b. Detail</li> </ol> </li> <li>2. Sub-point</li> </ol> </li> <li>B. Second section</li> </ol>

type 属性只控制当前层级，不跨层继承

type="A" 只影响它所在这层 <ol> 的编号样式，不会让下一层自动变成 type="1"。你得手动为每一层指定 type 值，否则浏览器会按默认（阿拉伯数字）渲染内层。

• 第一级：type="A" 或 type="1" 或 type="a"
• 第二级：type="1"、type="a"、type="i" 等，和父级无关
• 支持的值包括："1"、"a"、"A"、"i"、"I"
• 注意大小写敏感：type="i" 是小写罗马数字（i., ii.），type="I" 是大写（I., II.）

嵌套过深时，可访问性和缩进容易出问题

超过 4 级嵌套后，屏幕阅读器可能无法准确播报层级关系，CSS 缩进也容易视觉混乱。实际文档中，三级（A. → 1. → a.）已是常规上限；若需更深逻辑，建议拆分为独立章节或用定义列表 <dl> 替代。

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

• 避免在 <li> 中混用段落 <p> 和子列表 —— 有些旧版浏览器会自动闭合 <li>，导致结构塌陷
• 不要依赖 CSS 的 counter-reset / counter-increment 强行“修复”错误嵌套 —— 语义已坏，补救成本高且不可靠
• 测试时用键盘 Tab 导航 + 屏幕阅读器朗读，确认每层 <li> 都被正确识别为“列表项第 X 个”