html 中 ol 嵌套必须严格位于 li 内部，否则计数器重置；type 属性控制每层编号格式（a/1/a/i），start 指定起始值，css counters() 实现多级拼接编号如 2.1。
ol 嵌套必须严格位于 li 内部，否则计数器重置
浏览器对 <ol></ol> 的层级计数逻辑依赖 DOM 树的嵌套关系，而不是视觉位置或 CSS 缩进。一旦子 <ol></ol> 被写在父级 之后（即脱离了某个 <li>），它就被视为全新列表，编号必然从头开始（如 A.、1.、a.），而非延续上一级上下文。
常见错误现象包括：第二级始终显示 A.，第三级始终是 1.，跨章节无法连续编号（如本该是 B. 却又出现 A.）。
- ✅ 正确结构：子
<ol></ol>必须是某个<li>的直接子节点，中间不能插入<p></p>、<div> 或换行文本节点 <li>❌ 错误结构：<code><ol type="A"><li>A. Item</li></ol> <ol type="1">...</ol>—— 第二个<ol></ol>已脱离语义层级 - ⚠️ 注意：HTML 解析会把换行和空格当作文本节点，若
<li>和子<ol></ol>之间有回车或空格，某些浏览器可能破坏紧邻关系，建议写成<li>Text<ol>...</ol> </li>无换行 - 外层
<ol type="A"></ol>：大写字母 + 英文点（A.、B.、C.） - 中层
<ol type="1"></ol>：阿拉伯数字 + 英文点（1.、2.、3.） - 内层
<ol type="a"></ol>：小写字母 + 英文点（a.、b.、c.） - 最内层
<ol type="i"></ol>：小写罗马数字（i.、ii.、iii.） -
<ol start="34"></ol>：首项显示为 34.，后续自动为 35.、36.…… -
<li value="b">自定义内容</li>：该单项强制编号为 b.，不影响后续项（下一项仍为 c.） -
<ol type="a" start="2"></ol>：等效于<li value="b">，首项为 b.，但更适用于整组偏移 - ⚠️
start只接受整数，对字母型（type="a"）或罗马数字型（type="i"）列表，浏览器会按字母/罗马序映射：start="2" → b. / ii. - 核心样式：
content: counters(list-item, ".") " ";—— 自动递归拼接所有上级list-item值，用点分隔 - 必须先清除默认编号：
ol { list-style-type: none; }，否则与伪元素冲突 - 子
<ol></ol>需包裹在<li>内，且不能加额外counter-reset，否则破坏继承链 - 示例片段：
ol ol li::before { content: counters(list-item, ".") " "; display: inline-block; width: 3em; margin-right: 0.5em; }
用 type 属性控制每层编号格式（A / 1 / a / i）
type 是 <ol></ol> 的原生属性，用于声明该层使用的编号类型，它不依赖 CSS，语义明确且可访问性友好。但它的作用范围仅限当前 <ol></ol>，不会影响子层——子层需单独设置 type。
典型组合如医疗文档或法规条款中要求的「A. → 1. → a. → i.」，对应层级如下：
注意：type 值大小写敏感，type="a" 和 type="A" 效果不同；type="I" 是大写罗马数字（I.、II.、III.）。
用 start 属性精准指定起始编号（非从 1 开始）
当需要外层列表从 34 开始（如条款编号 34.、35.、36.），或某条目下子项从 b. 开始（跳过 a.），应使用 start 属性，而非手动写死文本或靠 CSS counter-reset 模拟。
用 CSS counters() 实现带前缀的多级编号（如 2.1、2.1.1）
当需要「外层编号 + 点 + 内层编号」拼接（如 2.1、2.2、2.1.1），type 和 start 无法满足，必须用 CSS counters() 函数配合伪元素。
关键点在于：不重置内置 list-item 计数器，而是复用它——因为 <ol></ol> 默认就关联 list-item 计数器，其值由 start、嵌套深度和顺序共同决定。
这种写法不依赖 JS，支持打印、可访问性良好，但要注意：若某层用了 type="a"，counters(list-item, ".") 仍输出数字，此时需改用自定义计数器（counter-reset: section 等），那就超出纯 HTML 控制范畴了。
