HTML5多级嵌套列表需结构合法、语义准确、样式可控；必须在li内嵌套子列表，用CSS counter实现1.1式编号，避免超3层嵌套以保障可访问性。

在HTML5中实现多级嵌套列表，关键不是靠标签自动“聪明编号”，而是靠结构合法、语义准确、样式可控三者配合。浏览器默认不生成1.1或A.1这类层级编号，但只要嵌套写对，CSS就能精准接管。

嵌套必须严格在li内部完成

所有子列表（

或

）必须作为父级
• 的直接内容，不能脱离
• 写在外部。这是避免计数重置、保证逻辑连贯的底线。
  • ✅ 正确：外层
    →
    1. 主项 → 内层
       （或
       ）→
       • 子项
    2. ❌ 错误：
       ...
       ...
       ——两个
       并列，浏览器视为两个独立列表，第二级永远从1或A开始
    3. 常见问题如“第二级总是A.”、“B.没出现”，90%源于这种结构断裂

  按语义选择ol与ul组合

  别只看符号样式，先想内容关系：有没有先后顺序？是否属于同一类并列项？

  

  Wechat HTML Publisher

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

  下载
  • 主项有序 + 子项也有序 →
    1. …
       …
    （如“安装流程→1.下载→2.解压→3.运行”）
  • 主项并列 + 子项有序 →
    • …
      …
    （如“开发环境→1.Node.js→2.Python→3.Docker”）
  • 纯分类罗列（无顺序要求）→ 全用
    ，靠CSS区分层级符号（● → ○ → ◆）

  用CSS counter实现真正层级编号

  要显示1.1、A.1.a这类编号，必须用CSS计数器，type属性只支持单层切换（如type="A"），无法跨层联动。

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

  • 给外层
    设counter-reset: section；每个
    1. 用counter-increment: section
    2. 子
       设counter-reset: subsection；其
       1. 用counter-increment: subsection
       2. ::before里用content: counters(section, ".") "." counters(subsection, ".")实现1.1、1.2效果
       3. 注意：屏幕阅读器不读CSS生成的编号，所以关键顺序词（如“第二步”“子条款”）建议保留在文本中

  控制缩进与可访问性细节

  浏览器默认缩进只是起点，实际项目中需主动管理视觉层次和使用体验。

  • 用margin-left或padding-left统一控制每层缩进距离（推荐rem或em单位，适配性更好）
  • 避免超过3层嵌套——深层结构既难维护，也影响屏幕阅读器播报逻辑（会反复说“子列表，2项”）
  • 不要依赖纯CSS改变list-style-type来表达关键信息，比如用小写字母a.表示“必须执行的第一步”，这不可靠
  • 混合嵌套时，确保每层都有明确的视觉区分（字体粗细、颜色、符号类型），帮助用户快速定位层级