HTML常用文本标签怎么做列表嵌套？多级列表代码写法-html教程-PHP中文网

子列表必须作为li的直接子元素，否则结构断裂、编号重置、屏幕阅读器无法识别层级；ol嵌套编号不连续时需用CSS counter实现“1.1”格式，混用ul/ol须基于语义且不可依赖list-style-type控制编号。

html常用文本标签怎么做列表嵌套？多级列表代码写法

ul 和 ol 本身不是“文本标签”，而是语义化列表容器；真正能嵌套的只有 li，且子列表（ul 或 ol）必须作为 li 的直接子元素，否则结构断裂、编号重置、屏幕阅读器无法识别层级。

为什么子列表写在 `ul` 里却没嵌套效果

浏览器会自动修正非法结构：把本该嵌在 li 里的 ul 或 ol 提到同级，变成两个独立列表。后果包括：

DOM 中子列表不再是父 li 的子节点，JS 查询 li.querySelector('ul') 返回 null
屏幕阅读器读作“列表，2 项”+“列表，3 项”，而非“列表，2 项，其中第 2 项包含子列表”
ol 内层编号永远从 1 开始，不是 1.1、1.2
CSS 选择器如 li > ul 失效，样式无法精准命中

`ol` 嵌套时编号不连续（如要 1.1、1.2）怎么办

原生 ol 不支持跨层编号继承，type 和 start 都只作用于当前层。可靠方案是 CSS counter：

给外层 ol 设 counter-reset: section
每层 li 都要 counter-increment: section
用 li::before { content: counters(section, ".") ". "; } 拼接层级
内层 ol 必须也设 counter-reset: section，否则计数器会继承上层值导致重复

示例片段：

<ol class="multi-level">
<li>第一项</li>
  <li>第二项
    <ol>
<li>子项一</li>
      <li>子项二</li>
    </ol>
</li>
</ol>

配合 CSS：

Wechat Article Html

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

下载

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