ol不显示编号主因是结构或样式破坏自动计数逻辑：li必须为ol直接子元素；list-style-type被全局CSS覆盖；li设display:flex/grid会隐式禁用标记；空ol或嵌套错误也导致失效。
ol 不显示编号，90% 是结构或样式“悄悄”破坏了浏览器的自动计数逻辑，不是 bug，而是规则被违反了。
检查 li 是否为 ol 的直接子元素
浏览器只对 ol > li 这种直系关系启用自动编号。只要中间插了任何其他标签（比如 div、section、甚至注释节点），编号就会消失，且浏览器通常不会报错——它只是默默放弃计数。
- ❌ 错误写法：
<ol><div><li>第一步</li></div></ol> - ✅ 正确写法：
<ol> <li>第一步</li> <li>第二步</li> </ol> - 若需包裹内容（如加标题、图标），用
span或div包在li内部，而非把li包在别的块级元素里
排查 list-style 被全局 CSS 覆盖
很多重置样式表（如 * { margin: 0; padding: 0; }）会连带让 ol 和 li 的 list-style 变成 none，而你没手动恢复。
- 检查 DevTools 中
ol或li计算后的list-style-type值是否为none - 临时加一行修复：
ol { list-style-type: decimal; }或更稳妥地：ol, ol li { list-style-type: decimal; } - 如果用了组件库（如 Ant Design、Bootstrap），查它是否对
ol设了list-style: none—— 需显式覆盖
确认 display 属性没隐式禁用标记
当 li 被设为 display: flex 或 display: grid 时，浏览器会隐式关闭列表项标记（即使 list-style-type 没变），这是 CSS 规范行为，不是 bug。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 现象：编号消失，但内容正常渲染、缩进错乱
- 解决：给该
li显式加回list-style-type: inherit（或decimal） - 不推荐对
ol本身设display: flex—— 它会破坏计数上下文，尤其在 Safari 旧版本中
验证 ol 是否为空或存在嵌套干扰
空 ol 在部分旧环境（如 IE、XHTML 模式）下可能跳过渲染；嵌套时若子 ol 没闭合或层级错位，也可能导致父级编号中断。
- 确保
ol至少包含一个li，哪怕只是占位：<ol><li></ol> - 嵌套必须严格：
<ol><li>一级<ol><li>二级</li></ol> </li></ol> - 避免在
ol内混用p、div等非li元素（它们会被浏览器忽略为列表项）
最常被忽略的一点：编号是否“视觉消失”和“语义失效”是两回事。用屏幕阅读器测试一下——如果它仍能读出“第 3 项”，说明只是样式问题；如果连读都不读序号，那一定是 DOM 结构或 list-style 被彻底切断了。
