ol标签的type属性仅控制当前列表独立编号样式，嵌套时各层计数器互不关联；跨层级连续编号需用css counter实现。
ol 标签本身不支持跨层级连续的大写字母编号（比如 A → B → C），它只对当前 ol 实例独立计数。你看到的「A. → 1. → a.」嵌套效果，本质是三层独立 ol 的组合，每层靠 type 属性指定样式，**不是单个计数器贯穿所有层级**。
为什么 type="A" 在嵌套后总是从 A 开始？
因为每个 ol 都是独立计数器。浏览器不会把外层的「A」值传递给内层——哪怕它被嵌套在 <li> 里。这是 HTML 规范行为，不是 bug。
-
type="A"只控制该ol内部的显示形式，不影响其他ol - 嵌套是否合法，只看 DOM 结构：子
ol必须是父级<li>的直接子元素，不能放在父外面 - 如果发现第二级又出现 A，大概率是结构写错了，比如把
<ol type="A"></ol>放到了上一级之后，而非<li>内部
type 属性能用哪些值？
HTML5 中 type 是可选属性，仅用于简单场景。它的取值和对应效果如下：
-
type="1"：阿拉伯数字（默认，可省略） -
type="A"：大写字母（A, B, C…） -
type="a"：小写字母（a, b, c…） -
type="I"：大写罗马数字（I, II, III…） -
type="i"：小写罗马数字（i, ii, iii…）
注意：type 在现代项目中已不推荐作为主要控制手段。它不支持前缀（如 “Section A.”）、不支持重置/跳号、无法与 CSS 伪元素联动，且部分旧浏览器对非 "1" 值支持不稳定。
真正可控的方案：CSS counter + ::before
需要跨层级连续编号（比如整个文档统一 A → B → C，不管嵌套多深），或者加前缀、换分隔符（A.1、A.a、1.1.1），必须用 CSS 计数器。核心三步：
- 用
counter-reset初始化计数器（通常放在最外层容器上） - 用
counter-increment在每个<li>上递增 - 用
::before { content: counter(...) }渲染编号
例如实现「A.」「B.」「C.」连续大写字母编号：
<style>
.section-list { counter-reset: section; }
.section-list > li { counter-increment: section; }
.section-list > li::before {
content: counter(section, upper-alpha) ". ";
}
</style><ol class="section-list">
<li>First section</li>
<li>Second section</li>
<li>Third section</li>
</ol>
这里 upper-alpha 是 CSS 的计数器样式关键字，比 type="A" 更可靠，也更容易扩展到多级（比如用 counters(section, ".") 生成 1.1.1）。
容易被忽略的关键点
很多人卡在「明明嵌套了，第二级还是 A」，其实问题不在 type，而在结构合法性。检查三点：
- 子
ol是否真的在某个<li>标签内部？而不是紧挨着父放在外面 - 有没有意外闭合了
<li>（比如漏写 或用了自闭合写法）
- 是否混淆了语义层级：用
ol套ol是合法的，但用ol套div再套ol就会破坏计数上下文
真正的难点从来不是「怎么让字母变大写」，而是「怎么让浏览器理解你想表达的层级关系」——这取决于 DOM 结构是否干净、语义是否准确，而不是加了多少个 type 属性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
