start属性无法跨多个连续编号，仅作用于当前列表首项显示值，不响应dom变化；css counter-reset+counter-increment才是唯一可靠方案。
ol 的 start 属性不能跨多个 元素连续编号
浏览器对每个 <ol></ol> 都独立计数，start 只影响当前列表第一项的显示值，不会“记住”上一个 <ol></ol> 的末尾编号。比如第一个 <ol start="1"></ol> 有 3 项，第二个 <ol start="4"></ol> 看似接上了，但一旦中间动态插入、删除或服务端分页不一致，编号立刻断裂。
更关键的是：start 是静态 HTML 属性，无法响应 DOM 变化；JS 修改 ol.start 不触发重排，屏幕阅读器可能读错序号。
- 不要手动计算并硬写
start值——它不解决“跨区块连续”的本质问题 -
start和type混用时易出错：例如start="3" type="a"显示的是c.，不是“第 3 个小写字母”的直觉预期 - 旧版 Safari 和 IE 完全忽略
start，若需兼容，必须降级处理
CSS counter-reset + counter-increment 是唯一可靠方案
要让多个分散的 <ol></ol>（比如不同章节的 HTML 片段）共享同一计数器，必须用 CSS 计数器，并在所有相关容器外层统一初始化。
典型结构是给章节容器设 counter-reset: chapter，再在每个 <ol></ol> 的 <li> 上用 ::before 注入 counter(chapter)：
section { counter-reset: chapter; }
section ol li::before {
content: counter(chapter) ". ";
counter-increment: chapter;
margin-right: 0.5em;
}
注意点：
-
counter-reset必须写在所有需要继承该计数器的元素共同父级上，不能只写在第一个<ol></ol>上 - 若章节本身也要编号（如“第 2 章”），可用嵌套计数器：
counter-reset: chapter section，再分别递增 -
counter()第二个参数支持decimal、lower-alpha、upper-roman等，比type属性更全且可控
嵌套章节编号（如 2.1、2.2）需分层定义计数器
单靠一个 chapter 计数器只能实现 1, 2, 3… 连续，无法生成带小节的层级编号。必须为每层单独声明并关联：
section { counter-reset: chapter; }
section > h2::before {
counter-increment: chapter;
content: counter(chapter) ". ";
}
section ol { counter-reset: section; }
section ol li::before {
counter-increment: section;
content: counter(chapter) "." counter(section) " ";
}
这样，每个 <section></section> 内的 <ol></ol> 都从 1 开始，但前缀是当前章号；且 chapter 和 section 互不影响。
- 切勿依赖
<ol type="1"><ol type="a"></ol></ol>实现 1.a、1.b——那是两层独立计数，不是父子关系 - 如果章节由 JS 动态加载，需确保新插入的
section被正确纳入已有计数器作用域，否则会重置 -
counter()不改变语义，屏幕阅读器仍按 DOM 顺序播报“列表第 X 项”，需额外加aria-setsize/aria-posinset
导出 PDF 或 SSR 场景下，CSS counter 无法生效怎么办
某些 PDF 生成工具（如 wkhtmltopdf、Puppeteer 默认配置）不执行 CSS 计数器逻辑，伪元素内容为空，导致编号丢失。
此时必须退回到服务端或构建时注入静态文本编号：
- 用
li.insertBefore(document.createElement('span'), li.firstChild)插入编号节点，而非依赖::before - 读取
li.dataset.chapter和li.dataset.section等属性，用parseInt()安全转换后拼接，避免字符串隐式转换错误 - 禁用
li.value—— 它只影响单个<li>，且破坏可访问性，PDF 工具通常忽略它
最常被忽略的一点：跨章节连续编号不是样式问题，而是数据建模问题。编号逻辑必须和内容结构绑定，而不是靠浏览器“猜”。一旦把编号当作纯展示层任务来处理，就注定会在 SSR、PDF、无障碍等环节翻车。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
