如何实现 HTML 嵌套有序列表的自定义编号（如 1.1、1.1.1、A、B）-html教程-PHP中文网

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

本文详解如何通过 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），不能依赖

或 value 属性硬编码

——因为 value 仅影响单个

的起始数字，无法自动推导父子关系与嵌套格式。真正可靠且可扩展的方案是使用 CSS Counter（计数器）。

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

以下是一套完整、语义清晰、可无障碍访问（screen reader 友好）的实现：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载



<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><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>

? 关键原理说明：

counter-reset: section 在每个
counter-increment: section 使每个
自动递增该计数器；
counters(section, ".") 是核心：它会沿 DOM 树向上遍历所有同名计数器，用 "." 连接，从而生成 1.1.1 这类嵌套编号；
第三级改用 lower-alpha 并配合 counters(..., "", lower-alpha)，可输出 1.1.1 a；若只需纯字母（如 A），可改为 content: counters(subsubsection, "", upper-alpha) ". ";。

⚠️ 注意事项：

❌ 不要滥用 value 属性：它破坏语义、干扰屏幕阅读器、无法自动继承父级编号；
✅ 必须保持
1. 的嵌套结构：这是 CSS 计数器识别层级的前提；
2. ? 兼容性优秀：counters() 自 IE8 起即支持，现代浏览器完全兼容；
3. ? 打印友好：CSS 计数器在 PDF 导出（如 Chrome “另存为 PDF”）中仍能正确渲染。