value属性仅对内的元素有效,必须为正整数,优先级高于start,不支持或自身,不继承嵌套编号,兼容性好但需注意可访问性与css计数器协同问题。

value属性只对<li>生效,且仅限<ol></ol>内部
很多人误以为value能用在<ul></ul>里,或者想给整个<ol></ol>加value——这是无效的。value是<li>的专有属性,必须写在单个列表项上,而且只在<ol></ol>中起作用。
常见错误现象:<ul><li value="5">xxx</li></ul>完全不改变编号(因为<ul></ul>不支持编号逻辑);<ol value="5"><li>xxx</li></ol>会被浏览器忽略(value不是<ol></ol>的合法属性)。
-
value值必须为整数,不能是小数、字符串或负数(如value="1.1"或value="a"会退化为默认行为) - 一旦某个
<li>设置了value,后续未设value的<li>将从该值+1开始自动递增 - 多个
<li>连续设置value时,浏览器按书写顺序渲染编号,不校验是否“连续”或“合理”
和start属性混用时,优先级关系要清楚
start控制整个<ol></ol>的起始编号,value则覆盖单个<li>的编号。当两者共存时,value具有更高优先级——它会打断start设定的自然序列。
例如:<ol start="3">
<li>A</li>
<li value="10">B</li>
<li>C</li>
</ol> 渲染结果是:3. A,10. B,11. C。
-
start影响的是第一个未设value的<li>,一旦遇到value,后续编号就以它为基准 - 如果第一个
<li>就带value,start完全不起作用 - 不要指望
start和value组合出“跳号+重置”效果(比如想让第3项变回1),这需要手动为每个<li>设value
嵌套有序列表中,value无法跨层级继承
HTML原生不支持像“1.1”“2.3.1”这样的嵌套编号语义,value只能控制当前<ol></ol>内这一层的数字,不会自动拼接父级编号。例如:
<ol>
<li>第一章
<ol>
<li value="5">第一节</li>
</ol>
</li>
</ol>
内层<ol></ol>的<li>只会显示“5”,而不是“1.5”。若需此类效果,必须用CSS计数器配合counter-reset/counter-increment,并用::before生成内容。
-
value本身不触发CSS计数器重置,它只是修改DOM中该<li>的呈现值 - 混合使用
value和CSS计数器时,注意视觉编号和可访问性(ARIA)是否一致;屏幕阅读器通常读取的是value值,而非CSS生成的内容 - 打印PDF或静态导出时,纯CSS方案可能失效,而
value属性更稳定
兼容性和可访问性注意事项
所有主流浏览器都支持value属性,包括IE9+,但它在语义和辅助技术中的表现容易被忽略。
- 设置
value="0"或负数虽不报错,但会导致部分屏幕阅读器读作“零”或异常停顿,建议只用正整数 - 动态插入带
value的<li>时,注意DOM更新后编号不会自动重排——浏览器只按初始HTML解析一次 - 如果列表内容由JavaScript生成,别依赖
value做逻辑判断(比如“找第7项”),应改用data-*属性或索引定位
真正难处理的不是怎么写value,而是当它和CSS计数器、JS操作、打印样式、无障碍需求同时出现时,哪一层在主导编号逻辑——这时候得打开开发者工具,逐层检查computed styles和AX tree。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











