HTML嵌套列表必须将子ol/ul作为父li的直接子元素，否则浏览器重置编号；type属性不继承，每层需单独声明；list-style-type仅控制显示样式，不影响计数逻辑；深层嵌套影响可访问性与缩进，推荐用CSS counters替代type。
子没包在- 里，浏览器就当它是新列表
所有嵌套的 <ol> 或 <ul> 必须是父级 <li> 的直接子节点。一旦写成 <ol></ol><ol></ol> 并列结构，或把子 <ol> 放在父 <ol> 内但不在某个 <li> 里面，浏览器就会自动闭合前一个列表、开启新的计数器——结果就是每层都从 A. 或 1. 开始。
验证方法：打开开发者工具，检查 DOM 中子 <ol> 是否为父 <li> 的直接子元素。不是？那语义就断了，编号重置是必然的。
常见错误写法：
<ol type="A"> <li>Item A</li> </ol> <ol type="1"> <!-- ❌ 孤立在外，不是任何 <li> 的子节点 --> <li>Sub 1</li> </ol>
正确写法必须嵌套进 <li>：
立即学习“前端免费学习笔记（深入）”；
<ol type="A">
<li>Item A
<ol type="1">
<li>Sub 1</li>
<li>Sub 2</li>
</ol>
</li>
</ol>type 属性不继承，每层 都得单独声明
type 是每个 <ol> 自己的属性，不会从父级继承。父 <ol type="A"> 下的子 <ol> 默认仍是 type="1"，除非你显式写上 type="a" 或 type="i"。
这导致两个问题：
- 忘记声明时，第二层突然变成 1.、2.，而不是预期的 a.、b.
- 硬编码多层
type值（比如 A → 1 → a → i）维护成本高，且无法生成连续章节号如 “2.3.1”
若需跨层级连续编号（如法律条文中的 “Article 3.2.b”），type 就不够用了，得用 CSS counter-reset/counter-increment + ::before。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
list-style-type 只改样式，不改计数逻辑
list-style-type: lower-alpha 和 type="a" 效果一样，但前者是 CSS 控制，后者是 HTML 属性。关键区别在于：list-style-type 不影响计数起点，它只决定“怎么显示数字”，而真实计数仍按阿拉伯数字递增再查表转换。
例如：
-
<ol start="3" type="a"><li>X</li></ol>显示为 c. X（因为 a=1, b=2, c=3） -
<ol start="3" style="list-style-type: lower-alpha;"><li>X</li></ol>同样显示为 c. X - 但如果你用 CSS counter，就能让 “第 3 条第 2 款” 真正渲染为 “3.2”，而不是靠字母映射
另外，type 在 HTML5 中已被标记为 obsolete，长期项目建议优先用 list-style-type 或 CSS counters。
缩进堆叠和可访问性陷阱
嵌套越深，<ol> 默认的 padding-left: 40px 就越明显，视觉上列表项被推到右边，甚至超出视口。这不是 bug，是累加效果。
简单修复：
ol ol, ul ul {
margin-left: 0;
padding-left: 20px;
}但更关键的是语义层面的问题：
- 超过 3 层嵌套，屏幕阅读器可能跳过中间层级，键盘用户用方向键也容易迷失
- 空
<li>会导致辅助技术直接忽略整段列表结构 - 用
<ol>表达分类关系（如 “水果 > 苹果 > 红富士”）违背语义——这是无序关系，该用<ul>或<nav>
真正难的不是写出嵌套结构，而是判断哪一层该用 <ol>、哪一层该换语义标签；以及当设计要求“1.2.3.a”这种混合编号时，是否值得为兼容 IE11 而放弃 CSS counters。
