CSS基础教程（四十）计数器：告别996！CSS计数器让网页自动计数，程序员头发有救了！

在Web开发的世界里，我们经常遇到需要展示数字序列的场景：文章目录列表、步骤指导、商品排名、幻灯片编号……传统做法要么手动硬编码（后期维护头疼），要么动用JavaScript（性能开销警告）。

但少有人知的是，CSS早已内置了一套强大的自动化计数系统——CSS计数器。它如同一个隐形的数学助手，默默跟踪你的计数需求，让数字自动呈现。

1. 什么是CSS计数器？

CSS计数器本质上是一种由CSS维护、存储并递增的变量。它允许开发者在页面上任何位置实现复杂的计数和编号系统，而无需任何JavaScript代码。

Think about it：我们早在20年前就用OL标签实现了有序列表，但CSS计数器就像是OL标签的超级赛亚人形态——它可以跨越多个容器、按照任意规则递增、在伪元素中显示，并且完全样式可定制。

2. 核心原理：CSS计数器的三大法宝

CSS计数器的实现依赖于三个关键属性：

2.1 counter-reset - 计数器初始化

counter-reset用于创建或重置计数器。语法很简单：

.container {
  counter-reset: section; /* 初始化名为section的计数器，默认值为0 */
}

你也可以设置初始值：

.container {
  counter-reset: section 3; /* 从3开始计数 */
}

2.2 counter-increment - 计数器递增

counter-increment用于指定何时以及如何增加计数器的值：

.item {
  counter-increment: section; /* 每次遇到.item元素，section计数器增加1 */
}

也可以指定增量值：

.item {
  counter-increment: section 2; /* 每次增加2 */
}

2.3 counter() / counters() - 显示计数器

最后，我们需要在内容中显示计数器的值：

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

对于嵌套计数器，使用counters()