如何实现三级嵌套HTML列表，第三层级用小写字母编号？

要实现第一、二级为前置零十进制编号，第三层级为小写字母的关联嵌套列表，核心是用CSS计数器完全自定义列表编号逻辑，替代原生列表的默认样式。以下是具体实现方案：

1. 核心思路 #

• 禁用原生列表的list-style，通过CSS的counter-reset/counter-increment定义三级计数器
• 利用::before伪元素拼接各级计数器内容，第三层级指定lower-alpha格式生成小写字母
• 每一级列表重置对应的子计数器，确保子项从起始值重新计数

2. 完整代码示例 #

CSS 样式

/* 全局重置列表默认样式 */
ol {
  list-style: none;
  padding-left: 0;
}

/* 第一级列表：初始化主计数器，生成前置零十进制编号 */
ol.level1 {
  counter-reset: level1;
}

ol.level1 > li {
  counter-increment: level1;
  position: relative;
  padding-left: 3em; /* 给编号预留空间 */
}

ol.level1 > li::before {
  content: counter(level1, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
  font-weight: 500;
}

/* 第二级列表：重置二级计数器，拼接一级+二级编号 */
ol.level1 > li > ol {
  counter-reset: level2;
  padding-left: 2em;
}

ol.level1 > li > ol > li {
  counter-increment: level2;
  position: relative;
  padding-left: 3em;
}

ol.level1 > li > ol > li::before {
  content: counter(level1, decimal-leading-zero) "." counter(level2, decimal-leading-zero) ".";
  position: absolute;
  left: 0;
}

/* 第三级列表：重置三级计数器，拼接前两级+小写字母编号 */
ol.level1 > li > ol > li > ol {
  counter-reset: level3;
  padding-left: 2em;
}

ol.level1 > li > ol > li > ol > li {
  counter-increment: level3;
  position: relative;
  padding-left: 2.5em;
}

ol.level1 > li > ol > li > ol > li::before {
  content: counter(level1, decimal-leading-zero) "." counter(level2, decimal-leading-zero) "." counter(level3, lower-alpha) ".";
  position: absolute;
  left: 0;
}

HTML 结构

<ol class="level1">
  <li>第一级项目（01.）
    <ol>
      <li>第二级项目（01.01.）
        <ol>
          <li>第三级项目（01.01.a.）</li>
          <li>第三级项目（01.01.b.）</li>
        </ol>
      </li>
      <li>第二级项目（01.02.）
        <ol>
          <li>第三级项目（01.02.a.）</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>第一级项目（02.）</li>
</ol>

3. 关键细节说明 #

• decimal-leading-zero：用于生成前置零的十进制数（如01、02），适配你现有第一二级的格式需求
• lower-alpha：指定第三层级计数器使用小写字母（a、b、c）
• 每一级列表通过counter-reset重置子计数器，确保每个父项下方的子列表从起始值重新计数
• 利用position: absolute和padding-left控制编号与内容的间距，避免排版重叠

如果你的列表是通过脚本动态生成的，只需确保HTML结构是标准的嵌套<ol>，再引入上述CSS即可生效，无需修改生成逻辑。

内容的提问来源于stack exchange，提问作者Harm van der Linde