li标签不支持value属性，它仅在ol子元素中被部分浏览器非标准解析；html5推荐用css计数器替代，通过counter-reset、counter-increment和::before实现可靠、可定制的序号控制。
li 标签不支持 value 属性？先确认浏览器行为
直接在 <li> 上写 value 属性（比如 <li value="10">xxx</li>）看似能用，但这是个历史遗留“伪标准”：它只在 <ol></ol> 的子元素 <li> 中被部分浏览器解析，且行为不一致。Chrome 和 Firefox 会按 value 设置起始序号，但 Safari 对非数字值（如 value="a"）可能忽略，Edge 旧版本甚至跳过整个列表重置计数。这不是 HTML5 正式支持的用法，W3C 明确建议用 CSS 计数器替代。
用 CSS counter-reset / counter-increment 精确控制序号
真正可靠、可自定义格式（数字、字母、罗马字、带前缀等）的方式是 CSS 计数器。核心逻辑是：重置计数器 → 每个 <li> 增量 → 用 ::before 插入内容。
例如让列表从 100 开始递增：
ol.custom {
counter-reset: item 99; /* 起始值 = 目标序号 - 1 */
}
ol.custom li {
counter-increment: item;
}
ol.custom li::before {
content: counter(item) ". ";
}
关键点：
-
counter-reset的初始值必须比你想要的第一个序号小 1（比如要从 100 开始，就设99） - 如果需要字母序号，改用
counter(item, lower-alpha) - 支持嵌套计数器，比如
counter(item, upper-roman) "." counter(subitem, decimal) - 不能用 JS 动态修改
counter-reset值来实时重排——得靠 JS 操作 class 或重写样式规则
JavaScript 动态设置序号时别碰 value 属性
如果序号需根据数据动态生成（比如后端返回的 ID），直接操作 value 属性不仅无效，还可能干扰 CSS 计数器或导致渲染错乱。正确做法是：
- 用
data-属性存原始值，例如<li data-id="2024001"> - 配合 CSS 的
content: attr(data-id) ". "显示（但注意这无法自动递增） - 若需动态递增逻辑，用 JS 遍历
li并设置textContent或innerText，但会破坏语义化列表结构 - 更稳妥的是用 JS 生成完整 HTML 字符串，再插入，避免 DOM 同步问题
兼容性与语义陷阱
用 value 属性最隐蔽的问题不是显示异常，而是可访问性（a11y）和 SEO：屏幕阅读器可能忽略它，搜索引擎可能不识别该序号为内容的一部分。CSS 计数器生成的内容默认是 content，属于装饰性文本，不影响语义；若序号本身是关键信息（比如法律条款编号），必须用真实文本而非伪元素。
真要保序号语义，只能放弃自动计数，手动写死文本：<li>100. 第一条</li> —— 这时 value 属性完全多余，也毫无作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
