如何实现 HTML 嵌套有序列表的自定义编号：如 1.1 1.1.1 A B

时间：2026-07-22 18:12:05 编辑：袖梨来源：一聚教程网

本文详解如何通过 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”。

这套方案兼顾标准合规性、维护性与可扩展性，是构建专业文档结构的首选实践。

立即学习“前端免费学习笔记（深入）”；

推荐专题

最新下载

热门教程

如何实现 HTML 嵌套有序列表的自定义编号：如 1.1 1.1.1 A B

✅ 正确做法：用 counter-reset 和 counter-increment 构建层级逻辑

? 关键原理说明：

⚠️ 注意事项：

? 进阶提示：

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程