ol嵌套后第二级全显示为“1.”是因为子ol未作为li的直接子元素，导致浏览器自动纠错重置计数器；正确做法是将子ol完整包裹在li内，确保DOM结构合法。
ol 编号不连续，基本不是浏览器 bug，而是 DOM 结构非法导致浏览器自动“纠错”——它会闭合前一个 ol、开启新列表，于是所有子 ol 都从 1 开始。修复只需一条铁律：子列表必须作为 li 的直接子元素，不能平级挂在父 ol 下。
为什么 ol 嵌套后第二级全显示为 “1.”？
常见错误是把子 ol 写在父 ol 内部但脱离 li，例如：
<ol type="A"> <li>A. First item</li> </ol> <ol type="1"> <!-- ❌ 独立标签，不在任何 <li> 里 --> <li>1. Sub-item</li> </ol>
浏览器解析时，会把第二个 ol 当作全新列表处理，计数器重置。结果就是每个 ol type="1" 都从 1. 开始，且与上一级完全断连。
- HTML 规范明确要求：
ol和ul只能作为li的子元素（或另一个ol/ul的子元素），不能是ol的兄弟节点 - DevTools 里常能看到被自动插入的隐式
</ol><ol>，这就是浏览器在“修复”非法结构 - 屏幕阅读器也会跳过这些孤立列表项，语义完全丢失
如何让 A. → 1. → a. 连续编号并正确嵌套？
关键不是加 CSS，而是先写对 HTML 结构。子 ol 必须完整包裹在某个 li 内部，且层级关系清晰：
立即学习“前端免费学习笔记（深入）”；
<ol type="A">
<li>A. First item
<ol type="1">
<li>1. Sub-item
<ol type="a">
<li>a. Detail</li>
<li>b. Detail</li>
</ol>
</li>
<li>2. Sub-item</li>
</ol>
</li>
<li>B. Second item <!-- ✅ 自动显示为 B. -->
<ol type="1">
<li>1. Sub-item</li>
</ol>
</li>
</ol>- 外层
type="A"控制主级，li内嵌ol type="1"控制次级，再内嵌ol type="a"控制末级 - 不需要 JavaScript 或 CSS counter，纯原生即可实现跨层级连续（A → B → C，而非重复 A）
- 如果某条主项不含子列表，就不要放空
ol，避免结构冗余
如何控制起始编号（比如从 34. 开始）？
用 start 属性，而不是手动写数字或靠 CSS 模拟：
<ol start="34">
<li>Only live players playing in a set may be inside the boundaries...</li>
<li>If any part of a live player touches a boundary line...</li>
<li>If any part of a live player touches a surface...
<ol type="a">
<li>That player may pass any balls...</li>
<li>That player may not intentionally touch...</li>
</ol>
</li>
</ol>-
start="34"让首项显示为 “34.”，后续li自动递增为 35.、36.、37. - 子
ol type="a"仍从 a. 开始，这是合理行为；若需从 c. 开始，可用start="3"（因为 a=1, b=2, c=3） - 避免用
value属性逐个设编号——它只影响单个li，后续项仍按默认逻辑递增，容易出错
最易被忽略的一点：嵌套层级越深，结构合法性越关键。哪怕只是多了一个没闭合的 li，或少了一个缩进层级，浏览器都可能重置整个计数链。别试图用 CSS counter-reset 补救——先确保 HTML 是对的，其余都是锦上添花。
