css content 属性有很多实用的用法，这其中最为强大的莫过于是计数器了，它甚至可以实现连 javascript 都不能够实现的效果，下面我们一起来研究一下吧。

css 计数器主要有 3 个关键点需要掌握。如下:

首先需要一个计数器的名字，这个名字由使用者自己定义。
计数器有一个计数规则，比如是 1,2,3,4...这样的递增方式，还是 1,2,1,2...这样的连续递增方式。
计数器的使用，即定义好了一个计数器名字和计数规则，我们就需要去使用它。
以上 3 个关键点分别对应的就是 css 计数器的 counter-reset 属性,counter-increment 属性，和 counter()/counters()方法。下面我们依次来介绍这三个玩意儿。

counter-reset 属性
counter-reset 属性叫做计数器重置，对应的就是创建一个计数器名字，如果可以，顺便也可以告诉计数器的计数起始值,也就是从哪个值开始计数，默认值是 0,注意是 0,而不是 1。例如以下一个示例:

html 代码如下:

<p>开始计数，计数器名叫counter</p>
<p class="counter"></p>
css 代码如下:

.counter {
  counter-reset: counter;
}

.counter::before {
  content: counter(counter);
}

标签: none