html有序列表无法真正“跳过”序号;start属性仅设首项显示值并线性递增,value属性可覆盖单个li编号(如value="5"使该项显示“5.”,后续自动为“6.”),实现视觉跳号,但会断裂计数链且影响可访问性。

HTML 有序列表本身不支持“跳过某个序号”这种操作——start 属性控制的是起始值,value 属性控制的是单个 li 的显示编号,但它们都不等于“跳过”。真正能实现视觉上“跳过”的,只有 value 配合后续项自动递增的逻辑,且必须理解它如何影响计数链。
用 value 强制中断并重置当前项编号
value 是唯一能直接让某一项“显示为指定数字”的原生方式,但它不是跳过,而是覆盖。浏览器会以该 value 为基准,给下一项加 1(除非下一项也设了 value)。
-
<li value="5">让这一项显示为 “5.”,不管前面是 3 还是 4 - 紧接着的
<li>会显示为 “6.”,不是 “4.” 或 “5.” - 如果想“跳过 7”,就在第 6 项后加
<li value="8">,第 7 项就变成 “8.”,视觉上跳过了 “7.”
示例:
<ol> <li>第一项</li> <li>第二项</li> <li value="5">第五项(跳过 3 和 4)</li> <li>第六项(自动显示为 6.)</li> </ol>
为什么不能用 start 实现跳号
start 只设定第一个 li 的显示值,之后严格 +1 递增。它没有“排除中间值”的能力。
-
<ol start="1"></ol>→ 1., 2., 3., 4., … -
<ol start="3"></ol>→ 3., 4., 5., 6., …(不是“从第 3 项开始”,而是“首项显示为 3”) - 写
start="100"不会跳过前 99 项,只是把第一项渲染成 100.
误以为 start 能跳号,往往是因为混淆了“起始显示值”和“DOM 索引”。
嵌套或 CSS counter 不是跳号,而是重建计数逻辑
如果你需要跨多个 ol 连续编号、或在中间插入非编号项后继续原序列,value 就力不从心了。这时得放弃原生 ol 自动计数,改用 CSS counter 手动控制:
- 用
counter-reset初始化计数器 - 用
counter-increment控制何时+1 - 用
::before { content: counter(...) }输出编号 - 想“跳过”,就跳过
counter-increment——比如对某个li不触发 increment,它的::before就不会更新
但注意:这完全脱离了语义化 ol,屏幕阅读器无法识别顺序逻辑,仅适合纯视觉场景。
真正容易被忽略的一点:value 只影响当前 li 及其后自动编号项,一旦中间混入另一个 value,计数链就断裂两次——而可访问性工具仍按 DOM 顺序播报“第 1 项、第 2 项…”,和视觉编号不再一致。要不要跳号,得先问清楚:这个“跳”是给用户看的,还是给机器读的。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











