如何创建带自定义起始点的HTML层级列表（隐藏外层编号）

需求是创建满足以下要求的列表：

• 支持自定义起始数字（比如从2开始生成2.1、2.2...）
• 呈现类似子列表的层级编号格式
• 隐藏外层列表的编号
• 换行文本保持和外层列表默认对齐的格式

预期效果示例：

1.1 Item...
    ...some Text...
1.2 Item
1.3 Item

或

2.1 Item
2.2 Item
    Item...
    ...some Text...
2.3 Item

解决方案代码 #

CSS 样式

/* 外层列表：隐藏默认编号，设置计数器初始值（起始点数字-1） */
.outer-list {
  list-style-type: none;
  counter-reset: section 1; /* 对应起始点2，若要起始点1则改为0 */
  padding-left: 0; /* 移除默认缩进，让内层文本对齐外层默认位置 */
}

/* 内层列表：隐藏默认编号，设置缩进保证文本对齐 */
.inner-list {
  list-style-type: none;
  padding-left: 2em; /* 控制缩进宽度，确保换行文本不会和编号重叠 */
}

/* 为内层列表项生成层级编号 */
.inner-list li::before {
  counter-increment: section;
  content: counters(section, ".") " ";
  margin-right: 0.5em;
}

HTML 结构

<!-- 起始点为2的列表 -->
<ol class="outer-list">
  <li>
    <ol class="inner-list">
      <li>Item<br>...some Text...</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
</ol>

<!-- 起始点为1的列表（修改counter-reset值为0） -->
<ol class="outer-list" style="counter-reset: section 0;">
  <li>
    <ol class="inner-list">
      <li>Item...<br>...some Text...</li>
      <li>Item</li>
      <li>Item</li>
    </ol>
  </li>
</ol>

关键说明 #

1. 自定义起始点：通过外层列表的counter-reset: section [N-1]实现，N是你想要的起始数字（比如起始点2就设为1，起始点1设为0）
2. 隐藏外层编号：给外层列表设置list-style-type: none，并且不对外层列表项生成伪元素编号
3. 文本对齐：内层列表设置padding-left，让换行的文本自动缩进，保持和编号后的首行文本对齐
4. 层级编号生成：使用counters(section, ".")函数自动拼接多级编号，实现X.1、X.2的格式

内容的提问来源于stack exchange，提问作者Murmulodi