ol列表无法原生合并，多个ol会各自独立编号；需用JS控制start属性或动态切片重写DOM以实现连续编号，打印时则需CSS counter配合手动分页。
ol 列表本身不支持“合并”——它不是可拼接的数据结构，而是语义化容器。你看到的“合并需求”，通常是想让多个 ol 在视觉或逻辑上呈现为连续编号（比如第 1 页末尾是 12，第 2 页开头自动从 13 开始），或者把长内容切分后仍保持全局序号连贯。这不能靠 HTML 原生属性解决，得靠 JS 控制 start 属性或重写 DOM。
为什么直接写多个 ol 会导致编号断裂
浏览器对每个 ol 独立计数：<ol><li>A</li></ol> 渲染为 “1. A”，紧接着再一个 <ol><li>B</li></ol> 会重新从 “1. B” 开始，而不是 “2. B”。即使加了 class="page" 或 style="display:none"，只要 DOM 是两个独立 ol，编号就断开。
用 start 属性手动续编，但只适用于静态切分
如果你已提前把长内容按页切好（比如服务端生成或构建时预处理），可在第二页及之后的 ol 上显式设置 start 值：
<section data-page="1">
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
</section>
<section data-page="2" style="display:none">
<ol start="3">
<li>第三项</li>
<li>第四项</li>
</ol>
</section>
-
start必须是整数，且需你手动算好每页起始编号，容易出错 - 翻页切换时若用
display: none/block控制可见性，编号能保持，但无法响应动态数据变化 - 如果内容来自 API 或用户编辑，
start值无法自动推导，必须配合 JS 重算并写入
真正可靠的方案：只保留一个 ol，JS 动态切片 + 重写 li
不要拆成多个 ol，而是在 JS 中把所有原始 li 提取出来，按页切片，每次只往同一个 ol 容器里塞当前页的 li 节点：
const allItems = Array.from(document.querySelectorAll('#source-list li'));
const pageSize = 5;
const chunks = [];
for (let i = 0; i < allItems.length; i += pageSize) {
chunks.push(allItems.slice(i, i + pageSize));
}
function renderPage(pageIndex) {
const ol = document.getElementById('paginated-ol');
ol.innerHTML = ''; // 清空
chunks[pageIndex]?.forEach(li => ol.appendChild(li));
}
renderPage(0);
- 编号天然连续，因为浏览器只渲染当前这批
li，且都在同一个ol下 - 无需维护
start，也不依赖 CSS 隐藏/显示多个容器 - 适合前端分页场景，但注意：
appendChild会把节点移出原位置，如果原li还有事件监听或状态，需在移动前保存或重建
打印场景下编号连贯的隐藏坑
即使你在屏幕上实现了连续编号，window.print() 时仍可能每页都从 1 开始——因为分页媒体查询（@page）不重置 ol 计数器。此时唯一办法是放弃语义化编号，改用 CSS counter：
立即学习“前端免费学习笔记（深入）”；
ol { counter-reset: item; }
li { counter-increment: item; }
li::before { content: counters(item, ".") ". "; }
但要注意：counters() 在跨物理页时仍可能重置，除非你把整个长内容预先按打印高度切分成多个 section，并在每个 section 内手动初始化 counter，这已超出纯 HTML/CSS 能力范围。
