ol标签的start属性可直接重置有序列表起始编号，如使编号从5开始；value属性仅微调单个li编号，后续li自动递增；CSS counter-reset适用于字母、罗马数字等复杂场景。

ol 标签的 start 属性直接重置编号起始值

HTML 原生就支持重置有序列表编号，不需要 JS 或 CSS 伪装。关键就是 ol 标签的 start 属性，它指定第一个 li 的编号数字。

常见错误是以为必须用 CSS 的 counter-reset，或者试图手动改 li 的 value 属性——其实 value 只影响单个 li，而 start 才是全局重置的正解。

• 5. 苹果
  6. 香蕉
  → 编号为 5、6
• start 接受任意整数（包括负数和零），但浏览器渲染时可能不显示负号前缀（如 start="-2" 显示为 -2、-1、0）
• 如果后续又嵌套一个 ol，它的编号默认从 1 开始，不受外层 start 影响

用 value 属性微调单个 li 的编号

当只需要某个 li 跳号或回退（比如插入一条备注后想保持原序），用 value 比重写整个 ol 更轻量。

注意：value 只改变当前 li 的显示编号，之后的 li 会在此基础上 +1 继续计数，不是“绝对重置”。

• 10. 第十项
  11. 第十一项
  → 显示 10、11
• 放在第 5 个 li 上，会导致它显示为 3，下一个自动变成 4，原有序列被覆盖
• value 值不会影响语义结构或辅助技术读取的顺序，仅控制视觉编号

CSS counter-reset 适合复杂嵌套或自定义格式

纯 HTML 属性解决不了的情况：比如需要字母编号（a, b, c）、罗马数字（i, ii, iii），或者跨多个独立 ol 共享同一计数器，这时候才轮到 CSS 计数器出场。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

容易踩的坑是以为加了 counter-reset: mylist 1 就能生效——它只是初始化计数器，你还得用 counter-increment 和 ::before 把编号真正渲染出来。

• 必须配合 counter-increment: mylist 在 li 上触发计数
• 编号内容要靠 li::before { content: counter(mylist) ". "; } 注入，否则页面不显示任何数字
• 如果多个 ol 都设了相同的 counter-reset 名称，默认各自独立计数；想连续计数，得把它们包进同一个父容器并只在外层重置一次

重置后语义与可访问性没变化，但别滥用 value

屏幕阅读器仍按 DOM 顺序朗读 li，编号是否重置不影响其逻辑顺序。也就是说，start 和 value 是纯展示层控制。

真正要注意的是可维护性：频繁用 value 手动调编号，后期增删条目时极易出错，容易导致编号断裂或重复。优先用 start 控制整块起始点，只在必要时用 value 打补丁。

另外，某些老旧浏览器（如 IE9 以下）对 start 支持不一致，但现代项目基本不用考虑。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！