value属性用于覆盖单个的自动编号,后续项在此值基础上+1递增;仅对直接子元素生效,必须为整数,与start共存时优先级更高。

用 value 属性给单个 <li> 指定编号
value 是 <li> 的原生属性,作用是覆盖当前项的自动编号值,后续项仍按此值递增。它不改变 DOM 顺序,也不影响其他项的计数逻辑,只改“显示数字”。
常见错误现象:写成 <ol value="10"></ol>(value 不属于 <ol></ol>);或以为设了 value="10" 后下一项会跳到 12(实际是 11)。
-
value必须是整数,非数字字符串(如"10a")会被忽略,退化为默认序号 - 负数和零合法:
<li value="-5">...</li>显示为 “-5.”,下一项是 “-4.” - 多个
value可混用:<li value="100">...</li> <li value="20">...</li>→ 显示 “100.”、“20.”、“21.” - 与
start共存时,value优先级更高:外层start="5",但第一个<li value="99">就显示 “99.”
为什么不用 CSS counter 替代 value
直接用 value 更轻量、语义清晰、无障碍友好——屏幕阅读器会如实播报该数字,且无需额外样式或 JS。
而 CSS counter 需要 counter-reset + counter-increment + ::before + content 四步配合,一旦漏掉任一环,编号就消失或错乱;更麻烦的是,它生成的内容无法被读屏软件可靠识别为“列表序号”,尤其在嵌套或动态插入时容易脱节。
适用场景对比:
- 只需个别项“跳号”或“重置起点” → 用
value - 需要前缀(如 “Step 1:”)、多级嵌套编号(如 “2.3.1”)、或跨容器计数 → 才上 CSS counter
- 想隐藏某几项编号(如只显前 5 项)→ 用
li:nth-of-type(n + 6) { list-style-type: none; },不是value
value 在嵌套 <ol></ol> 中是否生效
生效,但仅作用于所在层级的 <li>。子 <ol></ol> 的编号完全独立,不受父级 value 影响。
例如:
<ol>
<li value="10">主项 10</li>
<li>主项 11
<ol>
<li>子项 1</li>
<li value="99">子项 99</li>
</ol>
</li>
</ol>
渲染结果是:10. 主项 10;11. 主项 11;然后子列表单独显示 1. 子项 1;99. 子项 99;100.(隐式)。
注意:value 不会“传染”到子列表,也不触发父列表重新计数——这是它和 start 最关键的区别之一。
容易被忽略的兼容性细节
value 是 HTML5 标准属性,所有现代浏览器(Chrome/Firefox/Safari/Edge)及 IE8+ 均支持,但有两点易踩坑:
- 若
<li>内部有块级元素(如<div>),某些旧版 Safari 可能忽略 <code>value,建议保持<li>直接包裹内联内容 - 服务端渲染或模板引擎(如 Handlebars、Jinja)若对属性名做转义,可能把
value="10"渲染成value="10",这本身合法,但若中间混入 JS 动态操作,要注意引号匹配 - 当用 JavaScript 动态插入带
value的<li>时,需确保插入后浏览器重绘,部分低配安卓 WebView 可能延迟响应,可强制el.style.display = 'none'; el.offsetHeight; el.style.display = '';触发重排
最稳妥的做法:只在静态 HTML 或 SSR 场景中使用 value,避免在频繁增删的交互列表里依赖它做核心逻辑。











