ol嵌套必须将子ol完整置于父li内，否则计数器重置、层级断裂；type属性不继承，需逐层指定；超过三级嵌套损害可访问性，推荐上限为三级（A.→1.→a.）。

ol

嵌套不是“把两个 ol 写在一起”就行，结构错一点，编号就全乱——B. 后面跳回 A.，1. 之后又从 1. 开始，甚至屏幕阅读器根本读不出层级。

嵌套必须写在 li 里面，不能写在 ol 外面

浏览器只认「父级 li 包着子级 ol」这个结构。一旦把子 ol 拉到父 ol 外面，它就变成一个全新、独立的列表，计数器自动重置。

• ❌ 错误：
  1. A.
  1. 1.
  —— 第二个 ol 脱离上下文，永远从 1. 开始
• ✅ 正确：
  1. A.
     1. 1.
  —— 子 ol 是 li 的直接子元素
• 常见症状：第二级总是 A. 或 1.，不管上面是 A. 还是 B.；用键盘 Tab 浏览时，子项被跳过或顺序错乱

type 属性不继承，每层都得手动指定

type="A" 只影响它所在的那一个 ol，不会让下一层自动变成数字或小写字母。不写，浏览器就按默认 type="1" 渲染，哪怕你外层是大写字母。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 第一级：
• 第二级：
  （不能省）
• 第三级：
  （type="i" 是小写罗马数字，type="I" 才是大写）
• 注意大小写敏感：type="a" 和 type="A" 效果完全不同

超过三级嵌套，语义和可访问性会快速劣化

四级及以上（比如 A. → 1. → a. → i.）在多数真实场景中已超出合理表达边界。视觉缩进难对齐，屏幕阅读器可能无法准确播报“第四级列表项”，CSS 控制也容易失控。

• 推荐实践：三级为上限（A. → 1. → a.），更深层逻辑建议拆成独立章节，或改用 dl（定义列表）承载术语与解释
• 测试要点：不用鼠标，纯键盘 Tab 导航 + VoiceOver/NVDA 朗读，确认每一层 li 都被识别为“列表项，第 X 个”，且父子关系明确
• 别用 counter-reset 强行修错误结构——DOM 语义坏了，CSS 补丁只是掩盖问题

真正卡住人的从来不是怎么写 ol，而是写完发现编号断了、读屏器念错了、打印出来缩进错位。这些几乎全是结构没塞进 li 里导致的，而不是样式没调好。

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