HTML的不支持自动多级编号（如1.1），需嵌套+CSS计数器实现；并列会被视为独立列表导致编号重置，子列表必须嵌套在父内；type属性仅控制单层样式，不继承；超三层嵌套影响可访问性与维护性。
HTML 的 type 属性只能控制每层独立的编号样式（A、1、a），不能生成带小数点的层级编号。
为什么直接写多个
浏览器把每个
<ol type="A"> <li>Section A</li> </ol><ol type="1"> <!-- ❌ 脱离父 ol，浏览器视为新列表 --><li>Sub-item 1</li> </ol>
结果就是第二级永远从 1. 或 A. 开始，而不是延续为 A.1。根本原因是 DOM 结构断裂，语义丢失。
- 所有子
的直接子元素存在 - 不能把子列表写在父
和 之间但脱离 - 验证方式：用浏览器开发者工具看 DOM 树，确认子
内部
用 type 属性控制每层编号样式（A → 1 → a）
type 只影响当前这层 1。
-
type="A"：大写字母（A. B. C.） -
type="1"：阿拉伯数字（1. 2. 3.）——注意是字符串"1"，不是数字1 -
type="a"：小写字母（a. b. c.） -
type="i"：小写罗马数字（i. ii. iii.）；type="I"是大写（I. II. III.） - 大小写敏感，
type="a"和type="A"效果完全不同
正确嵌套示例：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
<ol type="A">
<li>First main item
<ol type="1">
<li>First sub-item
<ol type="a">
<li>Detail a</li>
<li>Detail b</li>
</ol>
</li>
</ol>
</li>
</ol>
用 CSS counter 实现 1.1、1.1.1 这类带点编号
原生
- 给每层
counter-reset: section;、counter-reset: subsection; - 每层
触发对应counter-increment - 用
::before+counters()函数拼接前缀，如content: counters(section, ".") ". "; - 禁用原生序号：
list-style: none;，否则会和 CSS 编号叠加
最小可用 CSS：
ol { list-style: none; counter-reset: section; }
li { counter-increment: section; }
li::before { content: counters(section, ".") ". "; }
嵌套超过三级时的实际限制
超过三层（A → 1 → a → i）后，问题就不是“能不能写”，而是“该不该写”：
- 屏幕阅读器对 >3 层嵌套的支持不稳定，可能跳过中间层级或播报错乱
- CSS 缩进容易视觉重叠，尤其在窄屏或缩放后
-
counters()在深嵌套中易出作用域错误，调试成本陡增 - 专业文档（如法规、医疗指南）普遍以三级为上限，更深逻辑建议拆成独立章节或改用
真正难的不是写出四层嵌套，而是让键盘用户、屏幕阅读器用户和打印输出都一致识别层级——这需要结构、CSS、语义三者严丝合缝，漏掉任何一环，编号就只是“看起来像”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
