html嵌套列表必须将子ol写在li标签内，type属性仅作用于当前层，每层需显式声明；编号连续性依赖正确dom结构，复杂编号如1.1需用css counter实现。
嵌套必须写在 <li> 里面，不能写在外面
浏览器只认语义嵌套，不认缩进或视觉对齐。你写的 <ol type="A"><li>A. Item</li></ol>
<ol type="1"><li>1. Sub</li></ol> 看起来是两级，但其实是两个独立列表——第二级必然从 1 开始，且和第一级毫无关系。
真正起作用的结构只有一种：<li> 元素内部直接放子 <ol></ol>。只要子 <ol></ol> 出现在 之前、<li> 标签之内，浏览器就把它当作该条目的子内容，编号才会继承上下文。
- ✅ 正确：
<li>A. Main<ol type="1"><li>1. Sub</li></ol> </li> - ❌ 错误：
<li>A. Main</li> <ol type="1"><li>1. Sub</li></ol>（子<ol></ol>在 外）
- ❌ 错误：
<li>A. Main<p></p> <ol type="1"><li>1. Sub</li></ol> </li>（<ol></ol>被包在<p></p>里，违反 HTML 嵌套规则）
type 属性只控制当前层，不影响父或子层级
type 是单层开关，不是全局配置。设 <ol type="A"></ol> 只让这一层用大写字母；它的子 <ol type="1"></ol> 才决定下一层是数字；再下一层还得自己加 type="a"。漏写任何一层的 type，浏览器就回退到默认的阿拉伯数字。
常见错误是以为外层设了 type="A"，内层就能“自动”变成数字——不会。每层都得显式声明。
- 第一级：用
<ol type="A"></ol> - 第二级：必须在某个
<li>内写<ol type="1"></ol> - 第三级：在第二级的
<li>内再写<ol type="a"></ol> - 第四级如需罗马数字，得手动加
<ol type="i"></ol>，没有“自动推导”逻辑
编号连续性靠结构保证，不靠 CSS 或 JS
你想让第二项显示为 “B.”，而不是又一个 “A.”，关键不是加什么 class 或 script，而是确保第二个 <li> 还在同一个外层 <ol></ol> 里。只要结构没断，浏览器就会自动递增：A → B → C。
如果发现编号突然重置，99% 是 DOM 断了——检查是不是无意中闭合了外层 ，或者把新 <ol></ol> 写到了外面。
- ✅ 连续：
<ol type="A"> <li>A. First</li> <li>B. Second</li> </ol> - ❌ 中断：
<ol type="A"><li>A. First</li></ol> <ol type="A"><li>A. Second</li></ol> - ⚠️ 隐形断裂：HTML 缩进看着对齐，但实际
<ol></ol>标签被注释或条件渲染逻辑提前关闭
需要 1.1、2.3.1 这类带点号的编号？只能用 CSS counter
原生 <ol></ol> 不支持跨层拼接编号。哪怕你嵌套三层，第二层也只会显示 “1.”、“2.”，不会变成 “1.1”、“1.2”。这种格式必须放弃 type，改用 CSS 的 counter-reset 和 counter-increment 手动构造。
这不是“更高级的用法”，而是原生能力边界——<ol></ol> 的设计目标是线性顺序，不是树状路径。
- 浏览器默认编号永远是单层独立计数
-
start属性只影响起始值，不改变编号结构 - 若文档要求严格匹配出版规范（如 ISO/IEC 标准条款编号），CSS counter 是唯一可靠方案
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
