直接并列写多个会导致编号重置,因为每个是自治计数器,不继承前一个序号;必须严格嵌套在内(如内容...)才能延续A→B→1→a的逻辑,且每层需手动指定type值。

为什么直接并列写多个 <ol></ol> 会导致编号重置
浏览器看到两个独立的 <ol type="A"></ol>,就会当作两个全新列表处理,第二组必然从 A. 重新开始。这不是 bug,是 HTML 规范的默认行为:每个 <ol></ol> 是自治计数器,不继承前一个的序号。常见错误是把第二级列表写在第一级 外面,结构上已断开嵌套关系。
<ol></ol> 必须严格嵌套在 <li> 内部才能延续编号
这是唯一能实现 A. → B. → 1. → a. 连续逻辑的写法。子 <ol></ol> 不是挂在父 <ol></ol> 下,而是必须作为某个 <li> 的直接子内容存在。
- 外层
<ol type="A"></ol>包裹所有一级条目 - 每个一级条目用
<li>包裹文字 + 子<ol></ol> - 第二级用
<ol type="1"></ol>,第三级用<ol type="a"></ol>,依此类推 - 不能把子
<ol></ol>放在<li>外、内 —— 位置错,语义就失效
<ol type="A">
<li>A. First section
<ol type="1">
<li>1. Sub-point
<ol type="a">
<li>a. Detail</li>
<li>b. Detail</li>
</ol>
</li>
<li>2. Sub-point</li>
</ol>
</li>
<li>B. Second section</li>
</ol>
type 属性只控制当前层级,不跨层继承
type="A" 只影响它所在这层 <ol></ol> 的编号样式,不会让下一层自动变成 type="1"。你得手动为每一层指定 type 值,否则浏览器会按默认(阿拉伯数字)渲染内层。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 第一级:
type="A"或type="1"或type="a" - 第二级:
type="1"、type="a"、type="i"等,和父级无关 - 支持的值包括:
"1"、"a"、"A"、"i"、"I" - 注意大小写敏感:
type="i"是小写罗马数字(i., ii.),type="I"是大写(I., II.)
嵌套过深时,可访问性和缩进容易出问题
超过 4 级嵌套后,屏幕阅读器可能无法准确播报层级关系,CSS 缩进也容易视觉混乱。实际文档中,三级(A. → 1. → a.)已是常规上限;若需更深逻辑,建议拆分为独立章节或用定义列表 <dl></dl> 替代。
立即学习“前端免费学习笔记(深入)”;
- 避免在
<li>中混用段落<p></p>和子列表 —— 有些旧版浏览器会自动闭合<li>,导致结构塌陷 - 不要依赖 CSS 的
counter-reset/counter-increment强行“修复”错误嵌套 —— 语义已坏,补救成本高且不可靠 - 测试时用键盘 Tab 导航 + 屏幕阅读器朗读,确认每层
<li>都被正确识别为“列表项第 X 个”


















