的 value 属性仅在作为 直接子元素时生效，否则被忽略；必须为整数，css 计数器更灵活但需手动管理语义与可访问性。
li 的 value 属性为什么有时不生效
直接给 <li> 设置 value 属性，只在它**是 <ol></ol> 的直接子元素**时才起作用；如果中间夹了 <div>、<code><section></section> 或其他非 <li> 元素，浏览器会忽略该 value，并从上一个有效 li 继续计数（或重置为 1）。这是 HTML 规范明确规定的——value 是“序号重置点”，不是“绝对编号”。
用 value 覆盖编号的正确写法
必须确保 <li value="X"> 紧跟在 <ol></ol> 内，且前面没有非法包裹元素。常见有效结构：
<ol> <li>第一项</li> <li value="5">这里会显示 "5."，不是 "2."，后续项自动变成 6、7...</li> <li>第六项</li> </ol>
-
value必须是整数（正负均可），小数、字符串如"5a"会被当作 0 处理 - 若想跳到 100，写
<li value="100">即可，无需补全中间编号 - 多个
value可以混用：<li value="3"> <li value="1">→ 第二个li显示 "1."，之后项从 2 开始
CSS counter-reset 和 counter-increment 更灵活
当需要动态控制、嵌套编号、或绕过 HTML 结构限制时，CSS 计数器比 value 更可靠：
ol.custom {
counter-reset: item;
}
ol.custom li {
counter-increment: item 1;
}
ol.custom li::before {
content: counter(item) ". ";
}
- 可以对任意元素（包括
<div class="item">）应用计数器，不依赖 <code><ol></ol> - 支持多级嵌套：
counter-reset: level1 level2，配合counter(level1, lower-alpha) -
counter-increment支持非 1 步进，比如counter-increment: item 2 - 注意：CSS 计数器不影响
tabindex或屏幕阅读器的语义顺序，仅视觉呈现 - 修改后新增的
li仍按 DOM 顺序继承编号，不会“自动填补空缺” - 若用
innerHTML替换整个ol，之前设置的value会丢失（除非你手动重写属性） - 推荐用
el.setAttribute('value', '42')，而不是el.value = 42（后者操作的是 property，对<li>无效） - React/Vue 等框架中，
value是受控属性，需在 JSX/模板里显式绑定，不能靠后期 DOM 操作覆盖
用 JavaScript 动态设置 value 的注意事项
通过 JS 修改 li.value 属性能立即生效，但有坑：
value 最省事；只要结构干净、编号不跨层级。一旦涉及条件渲染、折叠展开、或混合内容容器，就得切到 CSS 计数器——它不依赖 HTML 层级，但也意味着你得自己管好语义和可访问性。
