直接并列写多个会导致编号重置，因为每个是自治计数器，不继承前一个序号；必须严格嵌套在内（如内容...）才能延续A→B→1→a的逻辑，且每层需手动指定type值。
为什么直接并列写多个 <ol></ol> 会导致编号重置
浏览器看到两个独立的 <ol type="A"></ol>，就会当作两个全新列表处理，第二组必然从 A. 重新开始。这不是 bug，是 HTML 规范的默认行为：每个 <ol></ol> 是自治计数器，不继承前一个的序号。常见错误是把第二级列表写在第一级 外面，结构上已断开嵌套关系。
<ol></ol> 必须严格嵌套在 <li> 内部才能延续编号
这是唯一能实现 A. → B. → 1. → a. 连续逻辑的写法。子 <ol></ol> 不是挂在父 <ol></ol> 下，而是必须作为某个 <li> 的直接子内容存在。
- 外层
<ol type="A"></ol>包裹所有一级条目 - 每个一级条目用
<li>包裹文字 + 子<ol></ol> - 第二级用
<ol type="1"></ol>，第三级用<ol type="a"></ol>，依此类推 - 不能把子
<ol></ol>放在<li>外、内 —— 位置错，语义就失效
<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></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></dl> 替代。
- 避免在
<li>中混用段落<p></p>和子列表 —— 有些旧版浏览器会自动闭合<li>，导致结构塌陷 - 不要依赖 CSS 的
counter-reset/counter-increment强行“修复”错误嵌套 —— 语义已坏，补救成本高且不可靠 - 测试时用键盘 Tab 导航 + 屏幕阅读器朗读，确认每层
<li>都被正确识别为“列表项第 X 个”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
