本文详解如何通过 CSS 计数器与 HTML value 属性协同控制嵌套有序列表的层级化编号，支持从任意值（如 1.1）起始，并实现多级（数字+字母）混合编号，无需 JavaScript 即可完成语义化、可访问、可打印的结构化列表。
本文详解如何通过 css 计数器与 html `value` 属性协同控制嵌套有序列表的层级化编号，支持从任意值（如 1.1）起始，并实现多级（数字+字母）混合编号，无需 javascript 即可完成语义化、可访问、可打印的结构化列表。
在标准 HTML 中，
- 默认仅支持线性阿拉伯数字编号（1, 2, 3…），且嵌套时无法自动继承父级编号前缀（如 1.1.1）。但借助 CSS 计数器（CSS Counters），我们可以完全自定义每一层的编号格式与起始值，精准还原您所需的文档级编号体系（如政策条款、技术规范等场景）。
- counters(section, ".") 是核心：它将嵌套计数器按层级拼接为 1.1, 1.1.1 形式；
- 所有
- 的编号均由 ::before 伪元素生成，不破坏语义与可访问性（屏幕阅读器仍能正确朗读原生
- 结构）；
- value 属性（如
- ）仅接受数字，不能用于小数或带点字符串——因此 不推荐 用 value 实现层级编号（它仅影响单层起始值，且无法联动嵌套）。
✅ 正确方案：使用 CSS counter-reset / counter-increment + ::before
以下是一个完整、可直接运行的示例，严格对应您提供的结构：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<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><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>
? 关键说明：
⚠️ 注意事项
- 不要滥用 value 属性：
- 在 HTML 中是无效的（value 必须为整数），浏览器会忽略或强制转为 1，导致不可预测行为；
-
层级命名需唯一：每个嵌套
- 应使用独立计数器名（如 section/subsection/letter），避免冲突；
- 打印与导出友好：CSS 计数器在 PDF 导出（如 Chrome 打印）中完全保留，而 JS 动态插入文本则可能丢失；
-
无障碍支持：保持
- 原生结构，辅助技术可识别列表语义；伪元素仅负责视觉编号。
✅ 总结
要实现 1.1 → 1.1.1 → A 这类专业文档编号，CSS 计数器是唯一健壮、标准、无脚本的解决方案。它灵活、可维护、符合语义化 Web 原则。只需为每层
- 定义专属计数器并用 counters() 拼接，即可精准控制任意深度的编号格式——从此告别硬编码和 JavaScript 拼接，让结构与表现真正分离。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
