如何在列表中使用CSS计数器：包含不重置与重置场景

基础连续计数实现 #

要让多个<ol>列表保持序号连续，核心是只初始化一次全局计数器，不在每个<ol>上重置它：

/* 在页面根元素初始化全局计数器，仅执行一次 */
body {
  counter-reset: list-counter;
}

/* 隐藏默认有序列表序号 */
ol {
  list-style-type: none;
}

/* 每个列表项递增计数器 */
ol li {
  counter-increment: list-counter;
}

/* 自定义显示序号样式 */
ol li::before {
  content: counter(list-counter) ". ";
  margin-right: 0.5em;
}

让指定列表重置计数 #

如果需要某一个列表（比如第三个）重新从1开始计数，给这个<ol>添加一个自定义类（比如reset-counter），然后在CSS中针对该类重置计数器：

/* 给需要重置的列表添加此类，重新初始化计数器 */
ol.reset-counter {
  counter-reset: list-counter;
}

示例HTML结构 #

<!-- 第一个列表：从1开始 -->
<ol>
  <li>项目1</li>
  <li>项目2</li>
</ol>

<!-- 第二个列表：接续上一列表的序号（从3开始） -->
<ol>
  <li>项目3</li>
  <li>项目4</li>
</ol>

<!-- 第三个列表：添加reset-counter类，重新从1开始 -->
<ol class="reset-counter">
  <li>新列表项目1</li>
  <li>新列表项目2</li>
</ol>

原理说明 #

• 全局计数器list-counter在<body>初始化后，默认所有<ol>不会修改它的初始值，因此所有<li>会持续递增计数器，实现跨列表连续序号。
• 当带有reset-counter类的<ol>被渲染时，counter-reset会将计数器重新置为0，后续该列表内的<li>递增计数器时，就会从1开始生成序号。

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