应使用CSS counter实现嵌套ol接续编号，因HTML默认重置内层计数；通过counter-reset、counter-increment和counters()函数可生成如“3.1”“3.2”的多级序号，但需注意语义合理性与导出兼容性。

直接用 <ol> 套 <ol> 就行，但浏览器默认会重置内层编号起点，不继承外层序号 —— 这是多数人写错的核心原因。

ol嵌套后编号从1开始，怎么让它接续上级？

浏览器对嵌套 <ol> 的默认行为是：每个新 <ol> 都从 1 重新计数，不管它在第几级。比如外层第3项里的子列表，仍显示“1.”“2.”，而不是“3.1”“3.2”。

• 纯 HTML 无解 —— <ol> 标准不支持自动接续编号（CSS Counter 也不直接支持跨层级递增）
• 若需视觉上“3.1”“3.2”，必须用 CSS counter-reset + counter-increment 手动构造
• 简单场景下，更推荐改用 <ul> 做二级，避免编号语义干扰（比如导航、步骤说明以外的场合）

用 CSS counter 实现真正的多级序号（如 1.1、1.2、2.1）

这是唯一能可靠生成带点分隔多级编号的方式，但要注意：它不改变 DOM 结构，只控制显示。

Wechat Article Html

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

下载

• 外层 <ol> 设 counter-reset: section，每项 <li> 用 counter-increment: section
• 内层 <ol> 设 counter-reset: subsection，其 <li> 用 counter-increment: subsection
• 用 ::before 拼接内容：content: counters(section, ".") ". "
• 注意：counters() 第二个参数是分隔符，不是小数点字符本身；它会自动插入

ol { counter-reset: section; }
ol > li { counter-increment: section; }
ol > li::before { content: counters(section, ".") ". "; }

ol ol { counter-reset: subsection; }
ol ol > li { counter-increment: subsection; }
ol ol > li::before { content: counters(section, ".") "." counters(subsection, ".") ". "; }

什么时候不该用嵌套 ol？

语义错了比样式丑更严重。以下情况建议换结构：

立即学习“前端免费学习笔记（深入）”；

• 菜单导航（用 <nav> + <ul>，编号无意义）
• 步骤说明中某步含多个子步骤（可用 <ol> + <details> 或分段 <h3>）
• 需要点击展开/收起的二级列表（<ol> 不支持交互，得加 JS，不如从 <ul> 起手）
• 导出为 PDF 或打印时需严格编号控制（多数工具对 CSS counter 支持不稳定）

真正难的不是写两层 <ol>，而是判断这一堆数字到底该由 HTML 定义，还是由 CSS 控制，或是根本不该出现数字 —— 很多人卡在第一步就选错了方向。