首页
/ 正文

CSS 计数器（超详细）

更新时间: 2025-04-16 18:25:37

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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+ 小伙伴加入学习，欢迎点击围观

前言

在网页设计中，自动编号是常见的需求——比如文章章节编号、进度条显示、任务列表标记等。虽然 HTML 的 <ol> 标签能实现基础的有序列表，但当需要更灵活的样式控制或复杂逻辑时，CSS 计数器（CSS Counters）便成为不可或缺的工具。本文将从零开始讲解 CSS 计数器的核心概念、语法逻辑，并通过实战案例展示其在实际开发中的应用，帮助开发者高效掌控这一功能。

一、CSS 计数器是什么？

1.1 核心概念与作用

CSS 计数器是一个由浏览器维护的数值变量，开发者可以通过 CSS 代码对其初始化、递增、读取和重置。它主要用于在网页中实现自动编号、动态内容展示等场景，例如：

自定义章节编号（如 "第 3 章 2.1 节"）
进度条的百分比显示
动态任务进度标记

形象比喻：可以把 CSS 计数器想象成一个物理计数器，比如超市收银台的计数器。开发者通过 CSS 代码“按下按钮”（如 counter-increment）让计数器递增，或通过 counter() 函数读取当前数值。

1.2 与 HTML `<ol>` 标签的区别

虽然 <ol> 标签也能实现列表编号，但其灵活性有限：

无法跨元素层级计数
样式控制受限于 list-style-type 属性
无法实现多级嵌套编号（如 "1.1.1"）

而 CSS 计数器可以突破这些限制，甚至实现类似“游戏分数显示”“多级目录导航”等复杂功能。

二、CSS 计数器基础语法解析

2.1 核心属性与函数

CSS 计数器围绕三个核心属性展开：

2.1.1 `counter-reset`

用于初始化或重置计数器。语法为：

selector {  
  counter-reset: counter-name initial-value;  
}

counter-name：计数器的名称（需唯一）
initial-value（可选）：初始值，默认为 0

示例：

/* 初始化名为 "section-counter" 的计数器，初始值设为 1 */  
body {  
  counter-reset: section-counter 1;  
}

2.1.2 `counter-increment`

用于递增计数器的值。语法为：

selector {  
  counter-increment: counter-name increment-value;  
}

increment-value（可选）：递增值，默认为 1

示例：

/* 每个 .chapter 元素触发计数器递增 2 */  
.chapter {  
  counter-increment: section-counter 2;  
}

2.1.3 `counter()` 函数

用于读取计数器的当前值。语法为：

content: counter(counter-name, style);

style（可选）：指定数值的显示格式（如 decimal、lower-roman 等）

完整示例：

/* 初始化计数器并显示当前值 */  
body {  
  counter-reset: item;  
}  
.chapter::before {  
  counter-increment: item;  
  content: "Chapter " counter(item) ": ";  
}

2.2 计数器使用流程

初始化：用 counter-reset 创建并设置初始值
递增：用 counter-increment 触发数值变化
显示：通过 content 属性和 counter() 函数输出数值

流程图比喻：

初始化 → 触发递增 → 读取数值 → 展示结果  
（如同按下计数器按钮后，显示屏立刻更新数字）

三、CSS 计数器实战案例

3.1 案例 1：自定义编号列表

需求：创建类似 "1.1"、"2.1.3" 的多级章节编号

实现步骤：

初始化父级计数器

/* 初始化章节计数器和子章节计数器 */  
.chapter {  
  counter-reset: subsection;  /* 子章节计数器设为 0 */  
}

递增父级计数器

.chapter::before {  
  counter-increment: section; /* 章节计数器每次递增 1 */  
  content: counter(section) ". ";  
}

处理子章节

.subsection {  
  counter-increment: subsection;  
}  
.subsection::before {  
  content: counter(section) "." counter(subsection) " ";  
}

HTML 结构：

<div class="chapter">  
  Chapter 1  
  <div class="subsection">Section 1.1</div>  
  <div class="subsection">Section 1.2</div>  
</div>  
<div class="chapter">  
  Chapter 2  
  <div class="subsection">Section 2.1</div>  
</div>

效果：

1. Chapter 1  
   1.1 Section 1.1  
   1.2 Section 1.2  
2. Chapter 2  
   2.1 Section 2.1

3.2 案例 2：动态进度条显示

需求：根据完成步骤自动显示百分比

实现步骤：

初始化总步骤数

.progress-container {  
  counter-reset: total-steps 4;  /* 总共有 4 步 */  
}

递增当前步骤并计算百分比

.step {  
  counter-increment: current-step;  
}  
.step::after {  
  content: counter(current-step) "/4 ("  
           counter(current-step, integer) "/" counter(total-steps, integer)  
           " → "  
           counter(current-step, percent) ")";  
}

HTML 结构：

<div class="progress-container">  
  <div class="step">Step 1</div>  
  <div class="step">Step 2</div>  
  <div class="step">Step 3</div>  
</div>

效果：

Step 1 (25%)  
Step 2 (50%)  
Step 3 (75%)

四、进阶技巧与注意事项

4.1 多级计数器的嵌套控制

通过层级关系实现多级嵌套编号：

/* 父级初始化二级计数器 */  
.parent {  
  counter-reset: level1;  
}  
.parent > .child {  
  counter-reset: level2;  
}  
/* 递增规则与显示逻辑... */

4.2 条件控制与动态样式

结合伪类实现条件样式：

/* 当计数器值为偶数时改变背景色 */  
.item:nth-child(even)::before {  
  background: #f0f0f0;  
}

4.3 性能与兼容性

性能：CSS 计数器依赖浏览器计算，大规模使用时需测试性能
兼容性：主流浏览器均支持，但需注意旧版 IE 的兼容方案

五、总结与扩展

5.1 核心知识点回顾

计数器的初始化、递增、读取逻辑
多级嵌套与百分比计算的实现方法
通过伪元素与 content 属性结合使用

5.2 实际应用场景建议

技术文档的章节编号系统
表单步骤的进度提示
动态生成的目录导航

5.3 进阶学习方向

结合 JavaScript 动态修改计数器值
与 CSS Grid/Flexbox 结合实现复杂布局

通过本文的讲解，开发者应能掌握 CSS 计数器的基本原理与应用技巧。建议读者通过实际项目练习，逐步探索其在复杂场景中的可能性。记住，CSS 计数器不仅是“数字显示工具”，更是实现动态内容与交互的重要基础之一。

CSS 计数器（超详细）

前言

一、CSS 计数器是什么？

1.1 核心概念与作用

1.2 与 HTML `<ol>` 标签的区别

二、CSS 计数器基础语法解析

2.1 核心属性与函数

2.1.1 `counter-reset`

2.1.2 `counter-increment`

2.1.3 `counter()` 函数

2.2 计数器使用流程

三、CSS 计数器实战案例

3.1 案例 1：自定义编号列表

实现步骤：

3.2 案例 2：动态进度条显示

实现步骤：

四、进阶技巧与注意事项

4.1 多级计数器的嵌套控制

4.2 条件控制与动态样式

4.3 性能与兼容性

五、总结与扩展

5.1 核心知识点回顾

5.2 实际应用场景建议

5.3 进阶学习方向

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

CSS 计数器（超详细）

前言

一、CSS 计数器是什么？

1.1 核心概念与作用

1.2 与 HTML <ol> 标签的区别

二、CSS 计数器基础语法解析

2.1 核心属性与函数

2.1.1 counter-reset

2.1.2 counter-increment

2.1.3 counter() 函数

2.2 计数器使用流程

三、CSS 计数器实战案例

3.1 案例 1：自定义编号列表

实现步骤：

3.2 案例 2：动态进度条显示

实现步骤：

四、进阶技巧与注意事项

4.1 多级计数器的嵌套控制

4.2 条件控制与动态样式

4.3 性能与兼容性

五、总结与扩展

5.1 核心知识点回顾

5.2 实际应用场景建议

5.3 进阶学习方向

最新发布

jQuery.each()方法（长文解析）

jQuery.extend()方法（长文解析）

jQuery.fn.extend()方法（千字长文）

jQuery.globalEval()方法（长文讲解）

jQuery.grep() 方法（长文讲解）

jQuery.inArray() 方法（长文讲解）

jQuery.isArray() 方法（手把手讲解）

jQuery.isEmptyObject() 方法（千字长文）

jQuery.isFunction() 方法（建议收藏）

jQuery.isNumeric() 方法（手把手讲解）

1.2 与 HTML `<ol>` 标签的区别

2.1.1 `counter-reset`

2.1.2 `counter-increment`

2.1.3 `counter()` 函数