CSS counter-reset 与 counter-increment：用 CSS 实现自动编号的黑科技

在网页开发中，自动编号是一个常见需求 ------ 从文章的章节编号、评论楼层，到列表项的序号，都需要有序的数字标识。传统做法要么手动输入编号（维护成本高），要么用 JavaScript 动态生成（增加性能开销）。而 CSS 的counter-reset与counter-increment属性，就像一套 "自动编号引擎"，能纯靠 CSS 实现动态序号生成，无需手动维护或编写脚本。今天，我们就来解锁这个被低估的 CSS 黑科技。

一、认识 CSS 计数器：自动编号的底层逻辑

CSS 计数器是一套基于数值的计数系统，通过三个核心属性协同工作：

counter-reset：初始化计数器（设置起始值）。
counter-increment：递增或递减计数器的值。
content配合 counter()/ counters()：在页面中显示计数器的值。

这套系统的神奇之处在于：它能自动追踪元素的数量和层级关系，动态生成连续编号，甚至支持嵌套结构的多级编号（如 "1.1""1.2.3"）。

1.1 与传统编号方案的对比

方案	优势	劣势
手动输入	简单直接	修改结构时需手动调整所有编号，易出错
JavaScript 生成	灵活可控	需额外代码，动态添加元素时需重新计算，影响性能
CSS 计数器	纯样式实现，无需 JS，自动适应结构变化	依赖 CSS 渲染，兼容性有限（IE8 及以下不支持）

示例：最简单的自动编号

html 复制代码

<div class="counter-example">
  <p>第一条内容</p>
  <p>第二条内容</p>
  <p>第三条内容</p>
</div>

css 复制代码

/* 初始化计数器，命名为"item"，起始值默认为0 */
.counter-example {
  counter-reset: item;
}

/* 每个p标签递增计数器 */
.counter-example p {
  counter-increment: item;
}

/* 在p标签前显示编号（计数器值 + 自定义文本） */
.counter-example p::before {
  content: counter(item) ". ";
  color: #4a90e2;
  font-weight: bold;
}

效果：三个段落前会自动显示 "1.""2. ""3. "，且当添加或删除段落时，编号会自动重新计算。

二、核心属性解析：计数器的 "开关" 与 "齿轮"

2.1 counter-reset：初始化计数器

counter-reset用于声明和初始化计数器，语法如下：

css 复制代码

/* 基本用法：重置计数器"name"，起始值默认为0 */
selector {
  counter-reset: name;
}

/* 自定义起始值：重置计数器"name"，起始值为n */
selector {
  counter-reset: name n;
}

/* 同时重置多个计数器 */
selector {
  counter-reset: name1 1 name2 5; /* 计数器1从1开始，计数器2从5开始 */
}

计数器名称：自定义标识符（如 "section""comment"），区分不同计数器。
起始值 ：可选，默认为 0。若设置为-2，则第一个递增后的值为-1。

示例：从 10 开始计数

css 复制代码

.list {
  counter-reset: num 9; /* 起始值为9（递增后第一个值为10） */
}

.list li {
  counter-increment: num;
}

.list li::before {
  content: counter(num) ". ";
}

列表项会显示 "10.""11. ""12. "......

2.2 counter-increment：控制计数器增减

counter-increment用于修改计数器的值，语法如下：

css 复制代码

/* 基本用法：递增计数器"name"，步长默认为1 */
selector {
  counter-increment: name;
}

/* 自定义步长：递增/递减计数器"name"，步长为n */
selector {
  counter-increment: name n; /* n为正数递增，负数递减 */
}

/* 同时操作多个计数器 */
selector {
  counter-increment: name1 2 name2 -1; /* 计数器1+2，计数器2-1 */
}

步长：默认为 1。若设置为2，则每次递增 2；设置为-1，则每次递减 1。

示例：偶数编号

css 复制代码

.box {
  counter-reset: even 0;
}

.box p {
  counter-increment: even 2; /* 步长为2 */
}

.box p::before {
  content: "第" counter(even) "条：";
}

段落会显示 "第 2 条：""第 4 条：""第 6 条："......

2.3 显示计数器：counter () 与 counters () 函数

计数器的值需要通过content属性在伪元素（::before/::after）中显示，主要依赖两个函数：

counter(name, style)：显示指定计数器的值，style可选（如upper-roman表示罗马数字）。
counters(name, separator, style)：显示嵌套计数器的值，separator为层级分隔符（如 "."）。

示例：不同编号样式

css 复制代码

/* 数字编号（默认） */
.counter-decimal::before {
  content: counter(item) ". "; /* 1. 2. 3. */
}

/* 大写罗马数字 */
.counter-roman::before {
  content: counter(item, upper-roman) ". "; /* I. II. III. */
}

/* 大写字母 */
.counter-alpha::before {
  content: counter(item, upper-alpha) ". "; /* A. B. C. */
}

style支持所有 CSS 列表样式类型（list-style-type），如lower-roman（小写罗马数字）、decimal-leading-zero（前导零数字，如 01、02）等。

三、嵌套计数器：实现多级编号（如章节编号）

CSS 计数器的真正强大之处在于支持嵌套结构，通过counters()函数可以生成 "1.1""1.2.1" 这样的多级编号，完美适配文章章节、嵌套列表等场景。

3.1 多级编号的实现逻辑

在父元素上初始化 "一级计数器"。
在子元素上初始化 "二级计数器"（每次进入新的父元素时重置）。
用counters()函数拼接多级计数器的值，用分隔符（如 "."）连接。

示例：文章章节编号（1. 1.1 1.2 2. 2.1...）

html 复制代码

<article class="article">
  <h1>第一章</h1>
  <h2>第一节</h2>
  <h2>第二节</h2>
  <h1>第二章</h1>
  <h2>第一节</h2>
  <h3>第一小节</h3>
  <h3>第二小节</h3>
  <h2>第二节</h2>
</article>

css 复制代码

/* 初始化一级计数器（章节），起始值为0 */
.article {
  counter-reset: chapter;
}

/* 一级标题（h1）：递增章节计数器，重置小节计数器 */
.article h1 {
  counter-reset: section; /* 进入新章节，重置小节计数器 */
  counter-increment: chapter; /* 章节+1 */
}

/* 二级标题（h2）：递增小节计数器，重置子小节计数器 */
.article h2 {
  counter-reset: subsection; /* 进入新小节，重置子小节计数器 */
  counter-increment: section; /* 小节+1 */
}

/* 三级标题（h3）：递增子小节计数器 */
.article h3 {
  counter-increment: subsection; /* 子小节+1 */
}

/* 显示章节编号（仅章节号） */
.article h1::before {
  content: counter(chapter) ". ";
}

/* 显示小节编号（章节号.小节号） */
.article h2::before {
  content: counter(chapter) "." counter(section) " ";
}

/* 显示子小节编号（章节号.小节号.子小节号） */
.article h3::before {
  content: counter(chapter) "." counter(section) "." counter(subsection) " ";
}

效果：标题前会自动生成 "1.""1.1 ""1.2 ""2. ""2.1 ""2.1.1 ""2.1.2 ""2.2 " 这样的多级编号，且调整标题顺序时编号会自动更新。

3.2 用 counters () 简化多级编号

counters()函数可以自动拼接所有层级的计数器值，无需手动组合counter()：

css 复制代码

/* 替代h3的手动拼接 */
.article h3::before {
  content: counters(subsection, ".") " ";
  /* counters(最内层计数器, 分隔符) → 自动拼接所有父级计数器 */
}

counters(subsection, ".")会自动查找subsection计数器的所有父级计数器（section和chapter），按层级拼接为 "1.1.1""1.1.2" 等形式，与手动组合效果一致，但代码更简洁。

四、实战场景：CSS 计数器的灵活应用

4.1 评论楼层编号

为评论列表自动生成楼层号，支持动态添加：

html 复制代码

<div class="comments">
  <div class="comment">第一条评论</div>
  <div class="comment">第二条评论</div>
  <div class="comment">第三条评论</div>
</div>

css 复制代码

.comments {
  counter-reset: floor 0; /* 从1开始计数（0+1=1） */
  padding: 1rem;
}

.comment {
  counter-increment: floor;
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #eee;
  border-radius: 4px;
}

.comment::before {
  content: "#" counter(floor); /* 显示 #1 #2 #3 */
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background: #4a90e2;
  color: white;
  border-radius: 50%;
  margin-right: 0.5rem;
}

新增评论时，无需修改代码，楼层号会自动递增。

4.2 带前缀的表单步骤编号

为多步骤表单添加步骤标识，如 "Step 1/3""Step 2/3"：

html 复制代码

<div class="form-steps">
  <div class="step active">基本信息</div>
  <div class="step">验证手机</div>
  <div class="step">完成注册</div>
</div>

css 复制代码

.form-steps {
  counter-reset: step;
  display: flex;
  gap: 2rem;
  margin: 2rem 0;
}

.step {
  counter-increment: step;
  padding: 1rem 2rem;
  background: #f0f0f0;
  border-radius: 4px;
}

/* 显示当前步骤和总步骤 */
.step::before {
  content: "Step " counter(step) "/3: ";
  font-weight: bold;
}

/* 高亮当前步骤 */
.step.active {
  background: #4a90e2;
  color: white;
}

步骤文本前会显示 "Step 1/3:""Step 2/3: ""Step 3/3: "，清晰标识进度。

4.3 嵌套列表的自动编号

为嵌套列表生成带层级的编号（如 "1.""1.1 ""1.2 ""2. "）：

html 复制代码

<ul class="nested-list">
  <li>
    项目1
    <ul>
      <li>子项目1-1</li>
      <li>子项目1-2</li>
    </ul>
  </li>
  <li>
    项目2
    <ul>
      <li>子项目2-1</li>
      <li>
        子项目2-2
        <ul>
          <li>子项目2-2-1</li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

css 复制代码

/* 隐藏默认列表样式 */
.nested-list,
.nested-list ul {
  list-style: none;

  padding-left: 1.5rem;
}

/* 初始化一级计数器 */
.nested-list {
  counter-reset: level1;
}

/* 一级列表项：递增level1，重置level2 */
.nested-list > li {
  counter-reset: level2;
  counter-increment: level1;
  margin: 0.5rem 0;
}

/* 二级列表项：递增level2，重置level3 */
.nested-list > li > ul > li {
  counter-reset: level3;
  counter-increment: level2;
  margin: 0.3rem 0;
}

/* 三级列表项：递增level3 */
.nested-list > li > ul > li > ul > li {
  counter-increment: level3;
  margin: 0.2rem 0;
}

/* 显示一级编号 */
.nested-list > li::before {
  content: counter(level1) ". ";
  color: #e74c3c;
  font-weight: bold;
}

/* 显示二级编号（一级.二级） */
.nested-list > li > ul > li::before {
  content: counter(level1) "." counter(level2) " ";
  color: #2ecc71;
  font-weight: bold;
}

/* 显示三级编号（一级.二级.三级） */
.nested-list > li > ul > li > ul > li::before {
  content: counter(level1) "." counter(level2) "." counter(level3) " ";
  color: #f39c12;
  font-weight: bold;
}

效果：列表项前会生成带颜色区分的多级编号，层级关系清晰，且支持无限嵌套。

五、避坑指南：使用计数器的注意事项

5.1 计数器的作用域

计数器的作用域为声明它的元素及其所有子元素。若在不同父元素中重置同名计数器，会各自独立计数：

html 复制代码

<div class="box1">
  <p>段落1</p>
  <p>段落2</p>
</div>

<div class="box2">
  <p>段落1</p>
  <p>段落2</p>
</div>

css 复制代码

/* 两个盒子分别重置计数器，各自独立计数 */
.box1,
.box2 {
  counter-reset: para;
}

.box1 p,
.box2 p {
  counter-increment: para;
}

.box1 p::before {
  content: "A" counter(para) ". ";
}

.box2 p::before {
  content: "B" counter(para) ". ";
}

结果：box1 中的段落显示 "A1.""A2. "，box2 中的段落显示 "B1. ""B2. "，两个计数器互不干扰。

5.2 动态内容的兼容性

当通过 JavaScript 动态添加元素时，CSS 计数器会自动更新编号（无需额外代码），但在极少数旧浏览器中可能存在兼容问题：

完全支持：Chrome、Firefox、Safari、Edge（所有现代浏览器）。
不支持：IE8 及以下（需降级为静态编号或用 JS 替代）。

可通过@supports检测支持情况：

css 复制代码

/* 现代浏览器使用CSS计数器 */
@supports (counter-reset: test) {
  .supported {
    counter-reset: item;
  }
}

/* 旧浏览器使用默认样式 */
@supports not (counter-reset: test) {
  .unsupported li {
    list-style-type: decimal;
  }
}

5.3 避免计数器名称冲突

若页面中使用多个计数器，需确保名称唯一，否则会相互干扰：

css 复制代码

/* 错误：两个计数器同名，会相互覆盖 */
.section {
  counter-reset: num;
}

.comment {
  counter-reset: num; /* 与.section的计数器冲突 */
}

/* 正确：使用不同名称 */
.section {
  counter-reset: section-num;
}

.comment {
  counter-reset: comment-num;
}

5.4 注意计数器的重置时机

counter-reset不仅会初始化计数器，还会覆盖之前的计数器值。若在子元素中意外重置计数器，会导致编号中断：

html 复制代码

<div class="list">
  <li>项目1</li>
  <li class="reset">项目2（错误重置）</li>
  <li>项目3</li>
</div>

css 复制代码

.list {
  counter-reset: item;
}

.list li {
  counter-increment: item;
}

/* 错误：在子元素中重置计数器，导致后续编号从头开始 */
.list .reset {
  counter-reset: item;
}

.list li::before {
  content: counter(item) ". ";
}

结果：项目 1 显示 "1."，项目 2 显示 "1. "（因被重置），项目 3 显示 "2. "，编号逻辑被破坏。因此，应仅在需要重新开始计数的父元素上使用`counter-reset`。

六、总结

CSS 的counter-reset与counter-increment属性，用纯样式的方式实现了自动编号功能，其核心价值在于：

零脚本依赖：无需 JavaScript，减少性能开销，避免脚本错误导致的编号失效。
自动适应结构：添加、删除或调整元素顺序时，编号会自动重新计算，降低维护成本。
支持复杂层级 ：通过counters()函数轻松实现多级编号，满足章节、嵌套列表等场景。
样式高度可控 ：可结合content、伪元素和其他 CSS 属性，自定义编号的外观（颜色、字体、前缀等）。

在实际开发中，无论是文章排版、评论系统、表单步骤，还是嵌套列表，CSS 计数器都能发挥重要作用。它让开发者从繁琐的编号维护中解放出来，专注于内容和交互设计。

当然，CSS 计数器也有局限性（如 IE8 及以下不支持），但在现代浏览器主导的 web 环境中，它无疑是一套高效、简洁的自动编号解决方案。

下次需要实现自动编号时，不妨试试counter-reset与counter-increment------ 这套被低估的 CSS 黑科技，可能会让你的代码更优雅、维护更轻松。

你在项目中用过 CSS 计数器吗？欢迎在评论区分享你的使用技巧～