CSS计数器通过counter-reset和counter-increment配对实现跨ol连续编号，解决start属性无法感知前序列表末尾、不支持动态更新及跨浏览器兼容性差等问题。
ol 默认不连续编号，两段分开写的 <ol> 就是两个独立计数器——想让它们“接上”，得绕过默认行为。
用 CSS counter 实现跨 ol 连续编号
HTML 原生的 start 属性只能控制单个 <ol> 起始值，且无法感知前一个列表的末尾；真正可靠的方式是用 CSS 的 counter-reset 和 counter-increment 手动接管编号逻辑。
- 给所有目标
<ol>统一设置 class，比如class="continuous" - 在 CSS 中重置计数器（只在第一个
<ol>上生效），后续靠counter-increment自动延续 - 用
::marker或::before渲染编号，避免依赖原生list-style-type
示例：
<style>
.continuous {
counter-reset: cont-num;
}
.continuous li {
list-style: none;
}
.continuous li::before {
counter-increment: cont-num;
content: counter(cont-num) ". ";
margin-right: 0.5em;
font-weight: bold;
}
</style>
<ol class="continuous">
<li>第一项</li>
<li>第二项</li>
</ol>
<ol class="continuous">
<li>第三项</li>
<li>第四项</li>
</ol>
start 属性为什么不能真正“接续”
很多人试过在第二个 <ol> 上写 start="3"，结果发现：它只管自己从 3 开始，却不知道前面已经到 2 ——因为浏览器根本不追踪跨元素的计数状态。
立即学习“前端免费学习笔记（深入）”；
-
start是静态属性，不读取 DOM 中其他<ol>的实际项数 - 若第一个
<ol>动态增删<li>，start="3"不会自动更新 - IE 完全不支持
start，即使写了也无效 -
start对非decimal类型（如type="a"）的映射不直观：写start="3"+type="a"显示的是c.，不是“第 3 项”的语义
嵌套结构误用也会破坏连续性
如果你本意是“同一逻辑列表分段展示”，但把两段 <ol> 并列放在同级（比如都作为 <main> 的子元素），那它们就是两个完全无关的列表。即使视觉上靠 CSS 拉近了距离，编号也绝不会连续。
- 真正的连续性依赖统一的计数上下文，CSS
counter提供了这个上下文 - 不要试图用多个
<ol>+value属性拼接：每个<li value="3">只影响自身，且可访问性工具可能跳过语义断层 - 如果内容允许，最简方案其实是合并成一个
<ol>——但现实中文档分节、组件隔离等场景常不允许这样做
关键点在于：连续编号不是 HTML 列表的默认能力，而是需要显式声明的计数上下文；counter 是目前唯一稳定、可预测、能穿透多个元素边界的方案。
