本文详解如何通过 CSS 计数器与 HTML value 属性协同控制嵌套有序列表的层级化编号，支持从任意值（如 1.1）起始，并实现多级（数字+字母）混合编号，无需 JavaScript 即可完成语义化、可访问、可打印的结构化列表。
本文详解如何通过 css 计数器与 html `value` 属性协同控制嵌套有序列表的层级化编号，支持从任意值（如 1.1）起始，并实现多级（数字+字母）混合编号，无需 javascript 即可完成语义化、可访问、可打印的结构化列表。
在标准 HTML 中，<ol> 默认仅支持线性阿拉伯数字编号（1, 2, 3…），且嵌套时无法自动继承父级编号前缀（如 1.1.1）。但借助 CSS 计数器（CSS Counters），我们可以完全自定义每一层的编号格式与起始值，精准还原您所需的文档级编号体系（如政策条款、技术规范等场景）。
✅ 正确方案：使用 CSS counter-reset / counter-increment + ::before
以下是一个完整、可直接运行的示例，严格对应您提供的结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>嵌套有序列表：1.1 格式</title>
<style>
/* 重置顶层 ol，启用计数器 'section' */
ol.section { counter-reset: section; }
ol.section > li { counter-increment: section; }
ol.section > li::before {
content: counters(section, ".") ". ";
font-weight: bold;
}
/* 二级：子列表使用 'subsection' 计数器，依赖 section */
ol.subsection { counter-reset: subsection; }
ol.subsection > li { counter-increment: subsection; }
ol.subsection > li::before {
content: counters(section, ".") "." counters(subsection, ".") ". ";
font-weight: normal;
margin-left: 2em;
}
/* 三级：字母编号（A, B, C） */
ol.letters { counter-reset: letter; list-style-type: none; padding-left: 0; }
ol.letters > li { counter-increment: letter; }
ol.letters > li::before {
content: counters(section, ".") "." counters(subsection, ".") " "
counter(letter, upper-alpha) " ";
margin-left: 4em;
font-weight: normal;
}
/* 基础样式优化 */
ol { margin: 0.5em 0; padding-left: 0; }
li { margin: 0.25em 0; }
</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="letters">
<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>? 关键说明：
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- counters(section, ".") 是核心：它将嵌套计数器按层级拼接为 1.1, 1.1.1 形式；
- 所有 <li> 的编号均由 ::before 伪元素生成，不破坏语义与可访问性（屏幕阅读器仍能正确朗读原生 <ol><li> 结构）；
- value 属性（如 <li value="1.1">）仅接受数字，不能用于小数或带点字符串——因此 不推荐 用 value 实现层级编号（它仅影响单层起始值，且无法联动嵌套）。
⚠️ 注意事项
- 不要滥用 value 属性：<li value="1.1"> 在 HTML 中是无效的（value 必须为整数），浏览器会忽略或强制转为 1，导致不可预测行为；
- 层级命名需唯一：每个嵌套 <ol> 应使用独立计数器名（如 section/subsection/letter），避免冲突；
- 打印与导出友好：CSS 计数器在 PDF 导出（如 Chrome 打印）中完全保留，而 JS 动态插入文本则可能丢失；
- 无障碍支持：保持 <ol><li> 原生结构，辅助技术可识别列表语义；伪元素仅负责视觉编号。
✅ 总结
要实现 1.1 → 1.1.1 → A 这类专业文档编号，CSS 计数器是唯一健壮、标准、无脚本的解决方案。它灵活、可维护、符合语义化 Web 原则。只需为每层 <ol> 定义专属计数器并用 counters() 拼接，即可精准控制任意深度的编号格式——从此告别硬编码和 JavaScript 拼接，让结构与表现真正分离。
立即学习“前端免费学习笔记（深入）”；
