ol嵌套必须将子ol完整写在li内部，否则dom结构断裂导致编号重置；每层需手动设type属性，嵌套不宜超3层，否则影响缩进与可访问性。
ol嵌套必须把子ol完整写在li内部
浏览器只认「子ol是某个li的直接子元素」这个结构。一旦漏掉li，哪怕视觉上像缩进，DOM里就是两个并列ol，编号必然重置为1或A。
常见错误包括：
- 写成
<ol>主项<ol>子项</ol> </ol>——内层ol没包在li里，浏览器会自动闭合外层ol，再开一个新ol - 用
p包裹文字再塞进ol，比如<ol> <p>主项</p> <ol>子项</ol> </ol>——p不是ol的合法子元素，会被忽略，编号消失 - 把子
ol提出来放在父ol闭合后，结构彻底断裂
正确写法只有一种：<ol><li>主项<ol><li>子项</li></ol>
</li></ol>
每层ol都要手动指定type属性
type只控制当前这层的显示符号，不会继承、不会拼接。外层设type="A"，内层不会自动变成type="1"，你得自己写。
常用组合示例：
- 第一级：
<ol type="A"></ol>→ A.、B.、C. - 第二级：
<ol type="1"></ol>→ 1.、2.、3. - 第三级：
<ol type="a"></ol>→ a.、b.、c. - 注意大小写：
type="i"是小写罗马数字（i.、ii.），type="I"才是大写（I.、II.）
别依赖type生成“1.1”这类编号——它做不到，那是CSS counters()的事。
嵌套过深时缩进和可访问性会快速劣化
浏览器默认给每个ol加padding-left: 40px，嵌套三层就是120px，内容严重右偏；更关键的是，屏幕阅读器对超过3层的嵌套播报容易混乱，键盘用户按Tab或方向键也容易跳过中间层级。
实用建议：
- 限制DOM层级为3层以内：A. → 1. → a. 是安全上限
- 缩进修复用
ol ol { padding-left: 20px; }，别用text-indent（只动首行） - 法律条文、医疗指南等强结构场景，可用CSS
counter-reset/counter-increment实现「A.1.a」样式，但DOM仍保持3层 - 若逻辑上真需要4层以上，优先考虑拆章节，或换
dl（定义列表）表达分类关系，而非用ol硬套
验证嵌套是否合法的最快方式
打开浏览器开发者工具，选中内层ol，往上查父节点链：
- 必须是：
ol←li← 外层ol - 如果看到：
ol← 外层ol（中间缺li），说明结构已断裂 - 再用键盘
Tab导航，听屏幕阅读器是否准确读出“列表，第X项，子列表，第Y项”
最常被忽略的点：以为只要视觉缩进对了就OK，其实语义断了，无障碍和SEO就全失效了——而HTML校验器根本不会报错，它只检查标签闭合，不检查嵌套逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
