HTML有序列表列表项嵌套教程-html教程-PHP中文网

嵌套有序列表必须严格写在标签内，否则会导致编号重置、语义丢失和辅助技术失效；正确结构为→→，子列表需闭合于同一中，且多级编号需配合css counters()实现层级拼接。

html有序列表列表项嵌套教程

嵌套必须写在 `<li>` 里面，不能悬空

浏览器只认“<ol></ol> → <li> → <ol></ol>”这种结构。把子 <ol></ol> 直接写在外层 <ol></ol> 的末尾、两个 <li> 之间，或者塞进 <p></p> 里，都会导致编号重置、语义丢失、屏幕阅读器跳过子项。

常见错误现象：

外层是 34.、35.，子列表却从 A. 重新开始（不是 34.a.）
子列表项缩进异常，甚至贴到左边距
用 Chrome 开发者工具检查时，子 <ol></ol> 被自动移到了外层 <ol></ol> 外部

正确写法只有一种：<li> 内容结束前，直接写 <ol type="a"></ol>，且整个子列表必须闭合在同一个 <li> 里：

<ol start="34">
<li>First main item</li>
  <li>Second main item
    <ol type="a">
<li>Sub-item a</li>
      <li>Sub-item b</li>
    </ol>
</li>
  <li>Third main item</li>
</ol>

`start` 属性只对外层 `<ol></ol>` 生效，子列表不继承

start="34" 只会让第一个 <li> 显示为 “34.”，后续自动递增为 35.、36.……但它不会让子列表变成 “34.a.” 或 “34.1.”。子列表的起始值由它自己的 type 和是否带 start 决定——而默认就是从 1 或 A 开始。

如果你要的是 2.1、2.2 这种带父级前缀的编号，start 就不够用了，必须用 CSS counters()：

counters(list-item, ".") 会自动拼接所有嵌套层级的 list-item 计数器值
前提是外层 <ol></ol> 有 start，且子 <ol></ol> 真正嵌套在 <li> 内
别手动 counter-reset —— 浏览器内置的 list-item 计数器已足够

简短示例（CSS）：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

ol ol li::before {
  content: counters(list-item, ".") " ";
}

多级混合编号（A → 1 → a）靠 `type` 属性逐层控制

HTML 原生支持五种 type 值：1（数字）、a（小写字母）、A（大写字母）、i（小写罗马）、I（大写罗马）。每层 <ol></ol> 单独设置，互不影响。

关键点：

<ol type="A"></ol> 下的子 <ol></ol> 必须写在某个 <li> 里，才能被识别为第二层
不要指望第一层设了 type="A"，第二层不设 type 就自动变成数字——它默认还是 1，但容易被误认为没生效
若某层需从非首项开始（如第二层从 2 开始），加 start="2"，但仅限该层生效

结构示意：

<ol type="A">
<li>Section A
    <ol type="1">
<li>Point 1</li>
      <li start="2">Point 2</li>
      <li>Point 3</li>
    </ol>
</li>
</ol>

样式和语义冲突时，优先保语义

有人为了“让编号对齐”或“去掉默认缩进”，给 <ol></ol> 加 list-style-type: none，再用 ::before 拼数字。这本身没问题，但一旦漏掉某层的 counter-increment 或写错 counters() 分隔符，整个编号链就断了，且辅助技术无法还原顺序逻辑。

更稳妥的做法：