li 的 value 属性仅对有序列表（ol）的直接子元素 li 有效，且需满足：li 是 ol 的直接子元素、ol 无 start/reversed 等干扰属性、value 值为整数；否则无效，应改用 CSS counters 或其他方案。
li 的 value 属性只对有序列表有效
HTML 中 value 属性仅在 <ol> 的直接子元素 <li> 上起作用，对 <ul> 或嵌套层级里的 <li> 完全无效。浏览器会忽略它——哪怕你写了 <li value="99">xxx</li>，只要它不在顶层 <ol> 里，编号就不会变。
想改单项编号？必须用 value 且确保结构正确
只有满足以下全部条件，value 才生效：
-
<li>是<ol>的**直接子元素**（不能套<div>、<section>等） -
<ol>没有设置start或reversed等干扰属性（否则value可能被覆盖） - 数值为整数（
value="5"✅，value="5.5"❌，value="abc"❌）
示例：正确写法
<ol> <li>第一项</li> <li value="10">第十项（跳过 2–9）</li> <li>第十一项（自动续编）</li> </ol>
嵌套或复杂结构下 value 失效，改用 CSS counters
一旦 <li> 被包裹（比如 <ol><li><div><li>...），或需要跨列表统一编号、倒序、字母编号等，value 就无能为力。此时必须用 CSS counter-reset 和 counter-increment。
立即学习“前端免费学习笔记（深入）”；
常见场景：
- 多级列表中某一层要独立编号（如 1.1, 1.2 → 2.1, 2.2）
- 想让某项显示 “(i)”、“B.”、“③” 等非数字样式
- 动态插入的
<li>需要手动指定序号（JS 插入后无法靠value触发重排）
简例（自定义编号）：
ol.custom { counter-reset: item; }
ol.custom li { counter-increment: item; }
ol.custom li::before { content: "(" counter(item, lower-roman) ") "; }
JS 动态修改编号时别直接改 value
用 JS 设置 li.value = 42 看似可行，但实际只影响 DOM 属性，不触发浏览器重新计算编号逻辑（尤其在已渲染后）。更可靠的做法是：
- 删掉旧
<li>，用新value重建（适合少量项） - 改用
setAttribute('value', '42')并强制重排（如ol.offsetHeight触发重绘） - 彻底放弃
value，用data-value+ CSS::before显示（完全可控）
最后提醒：不同浏览器对 value 的解析细节略有差异（比如 Chrome 对负数支持更好，Safari 在某些嵌套下会忽略），真要稳定控制编号，CSS counters 或显式生成文本才是正解。
