value属性仅对ol的直接子li生效,强制设当前项编号为指定整数,后续项无条件+1递增;适用于法律条文跳号等非线性编号场景,非整数将失效。

value 属性只对 li 有效,且仅当它作为 ol 的直接子元素时才起作用;它会覆盖默认编号逻辑,但后续 li 仍按“上一项 value + 1”继续计数——这点极易被误解为“全局重置”。
什么时候该用 value 而不是 start?
当你需要跳号、断续或非线性编号时,value 是唯一选择;start 只能设整个列表的起始值,无法干预中间某一项。
- 场景示例:法律条文引用(第 12 条、第 15 条、第 20 条)必须用
<li value="12">...</li><li value="15">...</li> - 错误做法:试图用多个
ol+start拼接,会导致语义断裂、屏幕阅读器无法识别连续性 - 注意:
value值必须是整数(即使设为"10"字符串也会被转为数字),设value="a"或value="ii"会失效,回退到自动计算
value 和 type 的兼容性问题
value 不改变 type 的渲染规则,但会影响编号序列的数值基础——比如 type="a" 下 <li value="27"> 不会显示为 aa,而是从字母表第 27 位开始(即 aa 不存在,实际是 a → b → … → z → aa 的 CSS 行为由浏览器实现,HTML 标准不定义多字母循环)。
- 安全组合:仅在
type="1"(默认)下使用value,行为最可预测 - 风险组合:
type="i"或type="I"配合大value(如value="100")可能触发某些旧版浏览器 fallback 到十进制显示 - CSS 替代方案更可靠:
counter-reset+counter-increment可完全控制任意格式的编号,且不受 HTML 属性限制
为什么 value 不影响嵌套 ol?
value 是 li 的局部属性,只作用于其所在层级的 ol 计数器;嵌套的 ol 拥有独立计数器,不会继承父级 li 的 value 值。
立即学习“前端免费学习笔记(深入)”;
- 典型误用:
<ol><li value="5">主项<ol><li>子项</li></ol></li></ol>—— 子ol仍从 1 开始,不是从 5 开始 - 若需子列表延续编号,必须显式设置子
ol的start,例如:<ol start="6"><li>子项</li></ol> - 嵌套时语义优先:多层步骤建议用
ol+li+ CSS 缩进,而非依赖value伪造层级关系
真正难处理的不是怎么写 value,而是当它和 CSS list-style-type、counter-reset 同时存在时,浏览器的优先级规则不透明——调试时务必检查 computed styles 中的 content 和 counter-increment 实际值。



















