如何实现 HTML 嵌套有序列表的自定义编号：如 1.1 1.1.1 A B
作者：袖梨
2026-07-22
本文详解如何通过 CSS 计数器（CSS Counters）实现符合规范的多级嵌套有序列表，支持从 1.1 开始编号、自动递增子项（如 1.1.1）、切换字母序号（A/B/C），无需 JavaScript 即可完成语义化、可访问、可打印的结构化文档。
本文详解如何通过 css 计数器（css counters）实现符合规范的多级嵌套有序列表，支持从 `1.1` 开始编号、自动递增子项（如 `1.1.1`）、切换字母序号（a/b/c），无需 javascript 即可完成语义化、可访问、可打印的结构化文档。
要实现类似法律条文或技术文档中常见的层级化编号（如 1.1 → 1.1.1 → A），不能依赖 <ol start="2"> 或 value 属性硬编码——因为 value 仅影响单个 <li> 的起始数字，无法自动推导父子关系与嵌套格式。真正可靠且可扩展的方案是使用 CSS Counter（计数器）。
✅ 正确做法：用 counter-reset 和 counter-increment 构建层级逻辑
以下是一套完整、语义清晰、可无障碍访问（screen reader 友好）的实现：
<!DOCTYPE html><html lang="zh-CN"><head><style>/* 重置所有 ol 的默认计数器，并为各级定义专属计数器 */ol { counter-reset: section; /* 一级计数器：1.1, 1.2... */ list-style: none; padding-left: 0;}ol > li { counter-increment: section;}ol > li::before { content: counters(section, ".") ". "; font-weight: bold;}/* 二级：1.1.1, 1.1.2... */ol ol { counter-reset: subsection;}ol ol > li { counter-increment: subsection;}ol ol > li::before { content: counters(section, ".") "." counters(subsection, ".") " "; margin-left: 2em;}/* 三级：字母 A, B, C —— 使用 lower-alpha */ol ol ol { counter-reset: subsubsection; list-style-type: lower-alpha;}ol ol ol > li { counter-increment: subsubsection;}ol ol ol > li::before { content: counters(section, ".") "." counters(subsection, ".") " " counters(subsubsection, "", lower-alpha) ". "; margin-left: 4em; font-weight: normal;}/* 可选：统一段落间距与缩进 */ol li { margin-bottom: 0.4em;}</style></head><body><ol> <li>Authorization and Authentication <ol> <li>Bla Blaa Bla</li> <li>More bla bla</li> <li>almost Final Bla bla bla <ol> <li>detail 1</li> <li>detail 2</li> <li>detail 3</li> </ol> </li> <li>Final Bla</li> </ol> </li> <li>Acceptable Use <ol> <li>Do this</li> <li>Do that</li> </ol> </li></ol></body></html>
? 关键原理说明：
- counter-reset: section 在每个 <ol> 上初始化计数器；
- counter-increment: section 使每个 <li> 自动递增该计数器；
- counters(section, ".") 是核心：它会沿 DOM 树向上遍历所有同名计数器，用 "." 连接，从而生成 1.1.1 这类嵌套编号；
- 第三级改用 lower-alpha 并配合 counters(..., "", lower-alpha)，可输出 1.1.1 a；若只需纯字母（如 A），可改为 content: counters(subsubsection, "", upper-alpha) ". ";。
⚠️ 注意事项：
- ❌ 不要滥用 value 属性：它破坏语义、干扰屏幕阅读器、无法自动继承父级编号；
- ✅ 必须保持 <ol><li> 的嵌套结构：这是 CSS 计数器识别层级的前提；
- ? 兼容性优秀：counters() 自 IE8 起即支持，现代浏览器完全兼容；
- ? 打印友好：CSS 计数器在 PDF 导出（如 Chrome “另存为 PDF”）中仍能正确渲染。
? 进阶提示：
如需从 1.1 而非 1.0 开始，可在最外层 <ol> 添加 style="counter-reset: section 0;"，再在第一个 <li> 中用 counter-increment: section 1; 实现偏移——但更推荐语义化做法：将 1.1 视为一级条目，直接用内容表达逻辑起点，而非强行“跳过 1.0”。
这套方案兼顾标准合规性、维护性与可扩展性，是构建专业文档结构的首选实践。
立即学习“前端免费学习笔记（深入）”；
