value属性仅重置计数起点，不影响显示样式；实现自定义编号须用list-style:none配合::before伪元素和content。

OL 的 value 属性只对 <li> 生效，不控制显示样式

直接设置 <li value="5"> 是合法的，但它仅影响后续 <li> 的**计数起点**，不是“自定义显示编号”。浏览器仍按 ol 的 type（如 1、A、i）生成序号，value 只是重置计数器值。比如：

<ol>
<li value="3">第三项</li>
<li>第四项</li>
</ol>

会显示为 “3. 第三项”、“4. 第四项”，而非 “3. 第三项”、“3. 第四项”。

想让每个 <li> 显示完全自定义的编号（如“Step-01”、“⚠️ 2”），必须禁用默认计数

靠 value 无法实现任意文本编号。正确做法是：

学习导航

一款AI开发辅助工具，主要用于学习者优质的学习网址导航网站，适合需要提升相关任务效率的用户。

下载

• 给 <ol></ol> 加 list-style: none（CSS 中移除默认序号）
• 用 ::before 伪元素 + content 插入你想要的任意字符串
• 若需保留顺序逻辑，可用 counter-increment 配合 counter()，但最终显示内容仍由 content 决定

例如：

<ol class="custom-steps">
<li>初始化</li>
<li>验证</li>
</ol>

.custom-steps { list-style: none; }<br>.custom-steps li::before {<br>  content: "Step-" attr(data-step) " ";<br>  font-weight: bold;<br>}<br><!-- 使用时：<li data-step="01">初始化</li> -->

value 属性在嵌套或中断续编时容易误用

常见误解是认为 value 能“跳过中间项”或“恢复断点”，但它的行为依赖于浏览器对计数器的维护逻辑：

• 如果前面有 <li value="10">，后面没设 value 的 <li> 会从 11 开始，而不是从 1 继续
• 在 <ol reversed></ol> 下，value 表示该项的“起始降序值”，不是绝对位置
• 多个并列 <ol></ol> 之间互不影响计数器，value 不跨列表生效
• 若用 JS 动态插入 <li>，value 不会自动重算，需手动维护

错误示例：

<ol>
<li>一</li>
<li value="5">五</li>
</ol>

——这不会让第二项显示为 “5.” 并跳过 2–4，而是让第二项成为第 5 项，且没有第 2–4 项对应 DOM 节点，视觉上就是 “1. 一”、“5. 五”，中间空缺。

真正需要“任意编号字符串”时，别碰 value，用 CSS 或内联标记更可靠

除非你明确需要语义化序号（如辅助技术读出“第7项”），否则硬塞非数字/非序列内容到 value 里既无效也不合法（HTML 规范要求 value 是整数）。实际项目中：

• 纯展示需求 → 用 <span class="num">⚠️ 2</span> + CSS 控制布局
• 需语义+样式分离 → 用 aria-label 或 data-* 属性存原始编号，CSS ::before 渲染视觉内容
• 动态生成列表 → 在 JS 中拼接编号字符串，或用模板引擎注入，比依赖 value 更可控

浏览器对 value 的解析非常机械，而人眼看到的“编号”和 DOM 中的“计数器状态”根本不是一回事——这点最容易被忽略。