html嵌套列表必须将子ol/ul作为父li的直接子元素，否则浏览器重置编号；type属性不继承，每层需单独声明；list-style-type仅控制显示样式，不影响计数逻辑；深层嵌套影响可访问性与缩进，推荐用css counters替代type。

子

没包在
1. 里，浏览器就当它是新列表

所有嵌套的 <ol></ol> 或 <ul></ul> 必须是父级 <li> 的直接子节点。一旦写成 <ol></ol> <ol></ol> 并列结构，或把子 <ol></ol> 放在父 <ol></ol> 内但不在某个 <li> 里面，浏览器就会自动闭合前一个列表、开启新的计数器——结果就是每层都从 A. 或 1. 开始。

验证方法：打开开发者工具，检查 DOM 中子 <ol></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> 自己的属性，不会从父级继承。父 <ol type="A"></ol> 下的子 <ol></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。

list-style-type 只改样式，不改计数逻辑

list-style-type: lower-alpha 和 type="a" 效果一样，但前者是 CSS 控制，后者是 HTML 属性。关键区别在于：list-style-type 不影响计数起点，它只决定“怎么显示数字”，而真实计数仍按阿拉伯数字递增再查表转换。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

例如：

• <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></ol> 默认的 padding-left: 40px 就越明显，视觉上列表项被推到右边，甚至超出视口。这不是 bug，是累加效果。

简单修复：

ol ol, ul ul {
  margin-left: 0;
  padding-left: 20px;
}

但更关键的是语义层面的问题：

• 超过 3 层嵌套，屏幕阅读器可能跳过中间层级，键盘用户用方向键也容易迷失
• 空 <li> 会导致辅助技术直接忽略整段列表结构
• 用 <ol></ol> 表达分类关系（如 “水果 > 苹果 > 红富士”）违背语义——这是无序关系，该用 <ul></ul> 或 <nav></nav>

真正难的不是写出嵌套结构，而是判断哪一层该用 <ol></ol>、哪一层该换语义标签；以及当设计要求“1.2.3.a”这种混合编号时，是否值得为兼容 IE11 而放弃 CSS counters。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！