本文详解如何通过 CSS 计数器与 HTML value 属性协同工作，实现符合文档规范的多层级自定义编号有序列表（如 1.1 → 1.1.1 → A），无需 JavaScript 即可稳定渲染。
本文详解如何通过 css 计数器与 html `value` 属性协同工作，实现符合文档规范的多层级自定义编号有序列表（如 1.1 → 1.1.1 → a），无需 javascript 即可稳定渲染。
要实现类似「1.1 Authorization and Authentication」开头、并向下展开为「1.1.1」「1.1.2」乃至字母「A」「B」「C」的嵌套编号结构，纯 HTML 原生 <ol> 无法自动推导带小数点或混合格式的层级编号——但借助 CSS Counter（计数器）机制，我们可以完全可控地生成任意格式的序号，且语义清晰、可访问性良好。
✅ 推荐方案：CSS 计数器 + 多层 <ol> 嵌套
这是最标准、最可靠、也最符合 HTML 语义的做法。核心思路是：
- 每一层 <ol> 对应一个独立计数器（如 section、subsection、subsubsection、letter）；
- 使用 counter-reset 初始化计数器，counter-increment 递增，counter() 或 counters() 函数生成显示文本；
- counters() 函数支持自动拼接分隔符（如 "." 或 ""），完美适配 1.1.1 和 1.1.3.A 等复合格式。
以下是完整可运行示例：
<!DOCTYPE html>
<html>
<head>
<style>
/* 定义四层计数器 */
ol.section { counter-reset: section; }
ol.subsection { counter-reset: subsection; }
ol.subsubsection{ counter-reset: subsubsection; }
ol.letter { counter-reset: letter; }
/* 顶层：1.1, 1.2, 2.1... */
ol.section > li {
counter-increment: section;
}
ol.section > li::before {
content: counters(section, ".") ". ";
font-weight: bold;
}
/* 第二层：1.1.1, 1.1.2... */
ol.subsection > li {
counter-increment: subsection;
}
ol.subsection > li::before {
content: counters(section, ".") "." counters(subsection, ".") " ";
}
/* 第三层：1.1.3.A, 1.1.3.B... */
ol.subsubsection > li {
counter-increment: subsubsection;
}
ol.subsubsection > li::before {
content: counters(section, ".") "." counters(subsection, ".") "." counters(subsubsection, ".") " ";
}
/* 字母层：A, B, C（无数字前缀）*/
ol.letter > li {
counter-increment: letter;
}
ol.letter > li::before {
content: counter(letter, upper-alpha) " ";
margin-right: 0.5em;
font-weight: normal;
}
</style>
</head>
<body>
<ol class="section">
<li>Authorization and Authentication
<ol class="subsection">
<li>Bla Blaa Bla</li>
<li>More bla bla</li>
<li>almost Final Bla bla bla
<ol class="letter">
<li>detail 1</li>
<li>detail 2</li>
<li>detail 3</li>
</ol>
</li>
<li>Final Bla</li>
</ol>
</li>
<li>Acceptable Use
<ol class="subsection">
<li>Do this</li>
<li>Do that</li>
</ol>
</li>
</ol>
</body>
</html>✅ 优势说明：
- 无需手动写 value="1.1" —— 所有编号由 CSS 自动计算，修改层级结构后编号自动重排；
- 支持无障碍阅读器正确播报序号（因 <li> 仍为语义化列表项）；
- 可灵活扩展至 1.1.1.1 或罗马数字等任意格式（只需新增计数器+调整 counters() 参数）。
⚠️ 注意事项
- ❌ 避免滥用 value 属性模拟编号（如 <li value="1.1">）：value 仅接受整数，浏览器会强制解析为 1，导致不可靠；
- ❌ 不要依赖 li::before { content: "1.1.1" } 硬编码：丧失动态性与可维护性；
- ✅ 若需跳过某项编号（如从 1.1.2 直接到 1.1.4），可在对应 <li> 上添加 counter-increment: subsection -1 进行微调；
- ✅ 所有计数器名（如 section）区分大小写，且建议使用语义化命名便于团队协作。
总结
实现 1.1 → 1.1.1 → A 这类专业文档编号，CSS 计数器是唯一健壮、语义正确、面向未来的解决方案。它将编号逻辑与结构分离，既保持 HTML 的简洁性，又赋予样式层强大的表达能力。掌握 counter-reset / counter-increment / counters() 三者组合，你就能精准控制任何复杂列表的呈现方式——从法律条文到技术白皮书，皆可游刃有余。
