CSS counter() 函数（超详细）

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

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

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

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

在网页开发中，动态生成数字或符号的需求并不少见。例如，文章的章节编号、导航栏的步数标记、阅读进度提示等场景，都需要一种灵活且无需 JavaScript 即可实现的解决方案。这时，CSS 的 counter() 函数便派上了用场。它如同一个隐形的“数字助手”，能自动追踪元素的层级关系，并根据规则生成递增或递减的数值。对于编程初学者和中级开发者而言，掌握这一功能不仅能提升代码效率，还能让页面设计更具逻辑性和可维护性。

本文将从基础概念讲起，通过代码示例、对比表格和实际案例，逐步解析 counter() 函数的核心用法与高级技巧，并提供优化建议。

一、CSS Counter() 函数的基础概念

1.1 什么是 CSS 计数器？

CSS 计数器（CSS Counter）是一种用于在页面中自动追踪元素数量或层级关系的机制。它通过 counter-reset、counter-increment 和 counter() 等属性组合使用，实现动态数字的生成。
形象比喻：
可以将其理解为图书馆的书籍编号系统。管理员通过设置规则（如“每层楼重置编号”“每本书递增 1”），让书籍自动获得唯一的编号。而 CSS 计数器正是通过类似逻辑，为页面元素分配动态数值。

1.2 核心属性解析

以下是 counter() 函数依赖的三个关键属性：

示例代码：

/* 创建名为 "section" 的计数器，默认值为 0 */  
body {  
  counter-reset: section;  
}  

/* 每次遇到 <article> 标签时，计数器递增 1 */  
article {  
  counter-increment: section;  
}  

/* 在 <article> 前插入当前计数器值 */  
article::before {  
  content: counter(section) ". ";  
}  

此示例会为每个 <article> 标签前自动添加类似“1.”“2.”的编号。

二、CSS Counter() 的基本使用场景

2.1 自动生成章节编号

假设需要为文章的章节和子章节添加多级编号（如“1.1”“2.2”），可以通过嵌套计数器实现：

HTML 结构：

<div class="chapter">  
  <h2>第一章</h2>  
  <div class="subsection">  
    <h3>1.1 节</h3>  
    <h3>1.2 节</h3>  
  </div>  
</div>  

CSS 代码：

/* 初始化主章节和子章节计数器 */  
body {  
  counter-reset: chapter;  
}  

.chapter {  
  counter-increment: chapter;  
}  

/* 子章节计数器在章节内重置 */  
.chapter .subsection {  
  counter-reset: subsection;  
}  

.chapter .subsection h3 {  
  counter-increment: subsection;  
  /* 输出格式：主章节号 + "." + 子章节号 */  
  content: counter(chapter) "." counter(subsection);  
}  

通过嵌套 counter-reset，子章节的编号会在每个主章节内重置，从而形成“1.1”“1.2”“2.1”等层级结构。

2.2 动态列表项序号

传统无序列表（<ul>）的序号依赖 list-style-type，但若需自定义格式（如带括号的罗马数字“Ⅰ.”“Ⅱ.”），可借助计数器：

代码示例：

.custom-list {  
  counter-reset: list-counter;  
  list-style: none;  
}  

.custom-list li {  
  counter-increment: list-counter;  
}  

.custom-list li::before {  
  content: counter(list-counter, upper-roman) ". ";  
}  

此代码会将列表项的序号显示为“Ⅰ.”“Ⅱ.”，且支持 upper-roman、lower-alpha 等格式类型。

三、进阶技巧与常见问题

3.1 计数器的层级与作用域

计数器的作用范围由其定义的位置决定。例如：

• 若在 body 中使用 counter-reset: my-counter，则该计数器会贯穿整个页面；
• 若在某个 <div> 内重置计数器，则其子元素将继承并独立于父级的计数逻辑。

形象比喻：
这如同家族姓氏的传递规则。若在“爷爷”级别设置姓氏为“张”，则所有后代默认继承；但若“父亲”在自己的户口本中重置为“李”，则其子女的姓氏会独立于“爷爷”的分支。

3.2 多级计数器的协作

在复杂场景中，可同时使用多个计数器，并通过 counter() 的参数控制输出层级。例如：

代码示例：

/* 定义三级计数器 */  
.container {  
  counter-reset: level1 level2 level3;  
}  

.level1 {  
  counter-increment: level1;  
}  

.level1 .level2 {  
  counter-increment: level2;  
}  

.level2 .level3 {  
  counter-increment: level3;  
}  

/* 输出格式：1.2.3 */  
.level3::before {  
  content:  
    counter(level1) "."  
    counter(level2) "."  
    counter(level3) " ";  
}  

此代码能为多级嵌套结构生成类似“1.2.3”的编号，适用于目录导航或树形菜单的设计。

3.3 常见问题解答

Q：计数器未生效，如何排查？

• 检查 counter-reset 是否在正确的作用域内（如是否被父级覆盖）；
• 确认 counter-increment 是否被应用到目标元素；
• 验证 content 属性是否在伪元素（如 ::before）中调用计数器。

Q：如何实现递减计数器？
只需将 counter-increment 的值设为负数，例如：

.countdown {  
  counter-increment: countdown -1;  
}  

四、实际案例：阅读进度指示器

需求：为长篇文章的每个章节添加进度百分比提示，如“已完成 30%”。

实现思路：

1. 使用计数器统计总章节数；
2. 通过 JavaScript 动态获取当前滚动位置；
3. 结合 CSS 计数器显示进度比例。

代码实现：

/* 初始化总章节计数器 */  
body {  
  counter-reset: total-chapters;  
}  

.chapter {  
  counter-increment: total-chapters;  
}  

.progress-bar {  
  counter-reset: current-chapter;  
}  

/* JavaScript 动态更新当前章节 */  
// 假设通过 JS 将当前章节号存入 data-属性  
document.querySelector('.progress-bar').dataset.current = '3';  

.progress-bar::after {  
  content:  
    "已完成 "  
    counter(total-chapters, integer)  
    " 章中的 "  
    attr(data-current)  
    " 章，进度约 "  
    /* 简化计算：当前/总章数 × 100% */  
    calc( (attr(data-current, number) / counter(total-chapters)) * 100 ) "%";  
}  

此案例结合了 CSS 计数器与 JavaScript，通过动态数据绑定实现进度可视化。

五、性能优化与最佳实践

5.1 减少不必要的重排

频繁修改计数器值可能导致重排（Reflow）。建议：

• 将计数器逻辑集中在高阶父元素中，避免嵌套过深；
• 对于静态内容，优先使用静态编号而非动态计算。

5.2 兼容性处理

虽然现代浏览器普遍支持 CSS 计数器，但可通过 JavaScript 作为回退方案：

// 当 CSS 计数器不生效时，用 JS 补充生成编号  
document.querySelectorAll('article').forEach((el, index) => {  
  el.style.counterIncrement = 'section';  
  el.prepend(`${index + 1}. `);  
});  

六、总结与展望

CSS counter() 函数以其简洁性和灵活性，成为构建动态内容布局的重要工具。无论是自动生成章节编号、设计多级导航，还是实现阅读进度提示，它都能显著减少开发者的代码量。随着 CSS 新特性的不断演进（如 counter() 在 CSS Grid 或 Flexbox 中的创新用法），这一功能的应用场景将更加广泛。

对于开发者而言，理解计数器的层级逻辑、善用多级嵌套和格式化选项，是掌握其精髓的关键。通过本文的案例与代码示例，希望读者能快速将这一功能融入实际项目，提升页面的交互体验与开发效率。

（全文约 1800 字）