value属性可手动设置单个序号并影响后续编号，start属性统一调整整个起始值，css计数器支持自定义格式与复杂逻辑，但需注意可访问性与打印兼容性。
用 value 属性手动设置单个 <li> 的序号
HTML 有序列表（<ol></ol>）默认按顺序编号，但你可以让某个 <li> 显示指定数字，只需给它加 value 属性。浏览器会以此为起点，后续项继续递增（除非也设了 value）。
常见错误是以为 value 只影响当前项显示——其实它会影响整个后续编号逻辑。比如：
<ol> <li>第一步</li> <li value="5">跳到第五步</li> <li>第六步（自动变成6）</li> </ol>
注意：value 必须是整数，负数或小数会被忽略（部分浏览器可能转成 1）；它只对 <li> 有效，不能写在 <ol></ol> 上控制全局起始值。
start 属性适合统一偏移整个列表起始编号
如果只是想让整个 <ol></ol> 从非 1 的数字开始（比如接续上一个列表），用 start 更干净。它作用于 <ol></ol> 标签本身，不影响内部 <li> 的独立控制。
使用场景包括分段文档、多处嵌套列表、或 PDF 导出时需精确编号对齐：
-
start="3"→ 列表首项显示为 “3.”，第二项为 “4.” - 和
value不同，start不会打断编号连续性 - 若某
<li>同时有value，它会覆盖start的计算结果
示例：
<ol start="10"> <li>第十步</li> <li value="15">直接跳到十五</li> <li>十六（不是十一）</li> </ol>
CSS counter-reset 和 counter-increment 提供完全自定义能力
当需要非数字序号（如 “Step-A”、“Ⅱ”、“▶”）、跳号、倒序，或跨元素同步编号时，内联的 value 和 start 就不够用了，得靠 CSS 计数器。
关键点：
-
counter-reset初始化计数器（可设初值），写在<ol></ol>或父容器上 -
counter-increment每次匹配到<li>就加 1（可指定步长） -
::before配合content: counter(...)控制显示内容 - 兼容性好（IE8+），但不改变 DOM 中的语义序号，仅视觉层面
简单例子（罗马数字）：
ol.roman { counter-reset: item; }
ol.roman li { counter-increment: item; }
ol.roman li::before { content: counter(item, upper-roman) ". "; }
容易被忽略的语义与可访问性影响
用 value 或 CSS 改变序号，不会影响屏幕阅读器对列表结构的理解——只要保持 <ol></ol> + <li> 结构，读屏软件仍会报“第 X 项”，而不是读你写的数字或符号。
真正要注意的是：
- 若用 CSS 完全隐藏原生序号（
list-style: none）又没补::before，屏幕阅读器可能只读内容，丢失“这是第几项”的上下文 -
value值异常（如突降）会让键盘导航（Tab / Arrow）顺序和视觉序号错位，用户易困惑 - 打印样式中，部分浏览器会忽略 CSS 计数器，回归原生
value/start
复杂编号逻辑越强，越要验证键盘操作、读屏反馈和打印输出是否一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
