CSS counter-reset 属性（一文讲透）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：CSS 计数器的魔法世界

在网页开发中，我们常常需要为列表项、章节标题或导航菜单添加自动编号功能。虽然 HTML 的 <ol> 标签能实现基础的序号生成，但遇到复杂的场景（如嵌套列表、动态内容或非列表元素的编号）时，手动编写或调整编号会变得繁琐且易错。这时，CSS 的 counter-reset 属性 就像一把钥匙，能解锁更灵活的计数器控制能力。

本文将从零开始讲解 counter-reset 的核心原理、应用场景，并通过案例演示如何用它实现优雅的自动编号效果。无论你是刚接触 CSS 的新手，还是希望提升进阶技能的开发者，都能找到实用的知识点。

一、基础概念：什么是 CSS 计数器？

1.1 计数器的定义

CSS 计数器（CSS Counters）是浏览器内置的变量系统，允许开发者通过 counter-reset 和 counter-increment 两个属性动态管理数值。简单来说，counter-reset 用于初始化或重置计数器，而 counter-increment 则负责递增计数器的值。

1.2 形象比喻：图书馆的书架编号

想象一个图书馆的书架，每层书架需要按顺序编号。counter-reset 就像在每一层书架的起点处放置一个“重置器”，告诉系统“从这里开始重新计数”。而 counter-increment 则像书架上的标签，每放一本书就自动更新编号。通过组合这两个属性，我们能轻松管理复杂场景下的计数逻辑。

二、工作原理：counter-reset 的运作机制

2.1 属性语法与作用域

counter-reset 的基本语法如下：

selector {  
  counter-reset: counter-name [start-value];  
}  

• counter-name：自定义的计数器名称（如 section-counter）。
• start-value（可选）：初始值，默认为 0。

该属性的作用域是声明它的元素及其后代元素。例如，若在 <div class="container"> 中设置 counter-reset: my-counter 1，则所有后代元素（如 <p> 或 <ul>）都能访问到这个计数器。

2.2 计数器的继承与重置

计数器的值不会直接继承，但可以通过以下方式影响子元素：

1. 初始化：在父元素中声明 counter-reset，子元素可继承该计数器的存在。
2. 递增：通过 counter-increment: counter-name [step] 在子元素中修改值。

示例：

/* 父元素初始化计数器 */
.parent {  
  counter-reset: item-counter; /* 初始值为 0 */  
}  

/* 子元素递增计数器 */
.child {  
  counter-increment: item-counter 1;  
}  

/* 显示当前计数器值 */
.child::before {  
  content: counter(item-counter) ". ";  
}  

2.3 多级计数器与嵌套场景

通过为不同层级的元素设置独立的计数器，可以实现类似“1.1”“1.2”“2.1”等多级编号。例如：

/* 父级初始化主计数器 */
.chapter {  
  counter-reset: chapter-counter;  
}  

/* 子级初始化子计数器 */
.section {  
  counter-reset: section-counter;  
}  

/* 递增主计数器（在章节标题） */
.chapter::before {  
  counter-increment: chapter-counter;  
  content: counter(chapter-counter) ". ";  
}  

/* 递增子计数器（在子标题） */
.section::before {  
  counter-increment: section-counter;  
  content: counter(chapter-counter) "." counter(section-counter) ". ";  
}  

三、实战案例：counter-reset 的应用场景

3.1 自动编号的列表

需求：为非 <ol> 标签的元素（如 <div>）添加序号。
代码示例：

<div class="task-list">  
  <div class="task">完成文档编写</div>  
  <div class="task">测试功能</div>  
  <div class="task">发布版本</div>  
</div>  

.task-list {  
  counter-reset: task-counter; /* 初始化计数器 */  
}  

.task {  
  counter-increment: task-counter; /* 每次递增 1 */  
}  

.task::before {  
  content: counter(task-counter) ". "; /* 显示当前值 */  
}  

效果：每个 .task 元素前会显示 1., 2., 3.。

3.2 嵌套导航菜单的层级编号

需求：为多级导航菜单添加类似“1.1.1”的层级编号。
代码示例：

<nav>  
  <ul class="menu">  
    <li>  
      <a href="#">第一章</a>  
      <ul>  
        <li><a href="#">1.1 节点</a></li>  
        <li><a href="#">1.2 节点</a></li>  
      </ul>  
    </li>  
    <li>  
      <a href="#">第二章</a>  
      <ul>  
        <li><a href="#">2.1 节点</a></li>  
      </ul>  
    </li>  
  </ul>  
</nav>  

.menu {  
  counter-reset: chapter; /* 主层级计数器 */  
}  

.menu li {  
  counter-increment: chapter;  
}  

.menu li::before {  
  content: counter(chapter) ". ";  
}  

/* 子菜单初始化子计数器 */  
.menu li ul {  
  counter-reset: section; /* 子层级计数器 */  
  margin-left: 20px;  
}  

.menu li ul li {  
  counter-increment: section;  
}  

.menu li ul li::before {  
  content: counter(chapter) "." counter(section) ". ";  
}  

效果：主菜单显示 1., 2.，子菜单显示 1.1, 1.2, 2.1。

四、进阶技巧：与伪元素的结合

4.1 动态内容的伪元素显示

通过 ::before 或 ::after 伪元素，可以将计数器值直接插入到元素内容前/后。例如：

.article-section {  
  counter-increment: section-number;  
}  

.article-section::before {  
  content: "Section " counter(section-number) ": ";  
  font-weight: bold;  
}  

4.2 自定义计数器样式

计数器支持多种格式，如字母、罗马数字或自定义符号：

/* 使用大写字母格式（A, B, C...）*/  
.content::before {  
  content: counter(step-counter, upper-alpha) ". ";  
}  

/* 使用罗马数字（I, II, III...）*/  
.content::before {  
  content: counter(step-counter, upper-roman) ". ";  
}  

五、常见问题与解决方案

5.1 为什么计数器值不显示？

可能原因：

• 未在伪元素中使用 content: counter() 显示值。
• 计数器名称拼写错误或作用域不匹配。

解决方案：
检查 counter-reset 和 counter-increment 的名称是否一致，确保伪元素正确引用计数器值。

5.2 如何重置子元素的计数器？

在父元素中重新声明 counter-reset，即可覆盖子元素的当前值：

.parent {  
  counter-reset: my-counter 0; /* 初始值为 0 */  
}  

.child {  
  counter-reset: my-counter 10; /* 重置为 10 */  
}  

六、总结：CSS counter-reset 的核心价值

通过本文的学习，我们掌握了 counter-reset 属性的核心功能：初始化计数器，实现动态编号。它不仅能替代繁琐的手动编号，还能在复杂场景（如嵌套列表、动态内容）中提供优雅的解决方案。

关键知识点回顾：

• 计数器的初始化与递增逻辑
• 作用域对计数器的影响
• 多级计数器的嵌套应用
• 伪元素与计数器的结合技巧

下次当你遇到需要自动编号的场景时，不妨尝试用 counter-reset 和 counter-increment 来简化开发流程。CSS 计数器的灵活性，会让你的网页设计更加高效且富有创意！