子<ol>必须完整嵌套在父级<li>内，否则语义断裂、编号重置、屏幕阅读器失效；type属性不继承，多级编号需CSS counters()实现，四级以上嵌套应警惕可访问性问题。
必须把子 <ol> 完整写在父级 <li> 标签内部，否则浏览器会重置编号、结构断裂——这不是样式问题，是语义错误。
子列表必须嵌在 <li> 里，不能挂在 </ol> 外面
常见错误是把第二级 <ol> 写在第一级 </ol> 之后，比如：
<ol type="A"> A. First item </ol> <ol type="1"> <!-- ❌ 这个 ol 已脱离上层上下文 --> 1. Sub-item </ol>
浏览器会把它当全新列表处理，永远从 A 或 1 开始。正确写法是：
- 子
<ol>必须作为某个<li>的直接子内容 - 不能靠 CSS 缩进“模拟”嵌套，DOM 结构断了，屏幕阅读器和打印样式都会失效
- 用开发者工具检查：选中内层
<ol>→ 查看父节点 → 必须是<li>→ 再往上必须是外层<ol>
type 属性只作用于当前层，不继承也不拼接
type="A" 不会让下一层自动变成 type="1"；它只是告诉浏览器“这层用大写字母”，仅此而已。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 第一级：
<ol type="A"> - 第二级：
<ol type="1">（必须显式写，不能省略） - 第三级：
<ol type="a">（type="i"是小写罗马数字，type="I"是大写） -
type在 HTML5 中已不推荐用于嵌套控制，真正可靠的多级编号（如1.1、1.1.1）得靠 CSScounter
想实现 1.1、A.2.b 这类编号，必须用 CSS counters()
浏览器默认不拼接层级前缀。list-style-type 和 type 都做不到，只有 counters() 能递归生成带分隔符的编号。
- 每层
<ol>都要配counter-reset，比如counter-reset: sec; - 每层
<li>都要counter-increment: sec; - 用
content: counters(sec, ".") ". "拼出1.1样式 - IE10 及更早不支持
counters()，若需兼容，只能退回到静态文本或 JS 补充
嵌套超过 3 层就该警惕可访问性与缩进问题
四级以上嵌套时，CSS 默认 padding-left 累加会导致视觉错位，而屏幕阅读器可能无法准确播报“第几级列表项”。
- 三级（A. → 1. → a.）是常规上限；再深建议拆成独立章节或改用
<dl> - 别用
text-indent修正缩进——它只动第一行，对换行<li>无效 - 统一重置缩进：
ol, ul { padding-left: 2rem; }，再微调ol ol { padding-left: 1.5rem; } - 测试时务必用键盘 Tab + 屏幕阅读器朗读，确认每层都被识别为“列表项第 X 个”
最易被忽略的是：哪怕视觉上看着嵌套成功，只要子 <ol> 没包在 <li> 里，语义就已经崩了——后续所有样式、编号、可访问性补救都是在修一个本不该存在的漏洞。
