本文详解如何通过 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”。
这套方案兼顾标准合规性、维护性与可扩展性，是构建专业文档结构的首选实践。
立即学习“前端免费学习笔记（深入）”；
