HTML的不支持自动多级编号（如1.1），需嵌套+CSS计数器实现；并列会被视为独立列表导致编号重置，子列表必须嵌套在父内；type属性仅控制单层样式，不继承；超三层嵌套影响可访问性与维护性。

HTML 的 <ol></ol> 本身不支持“自动继承前缀”的多级编号（比如 1.1、1.2、2.1），必须靠结构嵌套 + CSS 计数器才能实现；仅用 type 属性只能控制每层独立的编号样式（A、1、a），不能生成带小数点的层级编号。

为什么直接写多个 <ol></ol> 并列会导致编号重置

浏览器把每个 <ol></ol> 当作一个全新列表处理，不管它视觉上看起来是不是“下一级”。常见错误是这样写：

<ol type="A">
  <li>Section A</li>
</ol>
<ol type="1">  <!-- ❌ 脱离父 ol，浏览器视为新列表 -->
  <li>Sub-item 1</li>
</ol>

结果就是第二级永远从 1. 或 A. 开始，而不是延续为 A.1。根本原因是 DOM 结构断裂，语义丢失。

• 所有子 <ol></ol> 或 <ul></ul> 必须作为父级 <li> 的直接子元素存在
• 不能把子列表写在父 <ol></ol> 外面，也不能插在 <li> 和
之间但脱离 <li> 包裹
• 验证方式：用浏览器开发者工具看 DOM 树，确认子 <ol></ol> 是否嵌套在某个 <li> 内部

用 type 属性控制每层编号样式（A → 1 → a）

type 只影响当前这层 <ol></ol>，不继承、不联动。你得手动为每一层指定，否则默认都是阿拉伯数字 1。

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

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 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" 效果完全不同

正确嵌套示例：

<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 这类带点编号

原生 <ol></ol> 不提供小数点前缀，必须用 CSS 计数器。关键在于分层定义、递增和拼接：

• 给每层 <ol></ol> 设置独立计数器，例如 counter-reset: section;、counter-reset: subsection;
• 每层 <li> 触发对应 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() 在深嵌套中易出作用域错误，调试成本陡增
• 专业文档（如法规、医疗指南）普遍以三级为上限，更深逻辑建议拆成独立章节或改用 <dl></dl> + 定义项

真正难的不是写出四层嵌套，而是让键盘用户、屏幕阅读器用户和打印输出都一致识别层级——这需要结构、CSS、语义三者严丝合缝，漏掉任何一环，编号就只是“看起来像”。