多么强大的css计数器啊

强大的 css 计数器

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

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

1. 首先需要一个计数器的名字，这个名字由使用者自己定义。
2. 计数器有一个计数规则，比如是 1,2,3,4...这样的递增方式，还是 1,2,1,2...这样的连续递增方式。
3. 计数器的使用，即定义好了一个计数器名字和计数规则，我们就需要去使用它。

以上 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);
}

在浏览器中运行以上示例，你会看到如下图所示:

可以看到计数器的初始值就是 0,现在我们修改一下 css 代码，如下所示:

.counter {
  counter-reset: counter 1;
}

在浏览器中运行以上示例，你会看到如下图所示:

这次我们指定了计数器的初始值 1，所以结果就是 1，计数器的初始值同样也可以指定成小数，负数，如-2,2.99 之类，只不过 IE 和 FireFox 浏览器都会认为是不合法的数值，当做默认值 0 来处理，谷歌浏览器也会直接显示负数，如下图所示:

低版本谷歌浏览器处理小数的时候是向下取整，比如 2.99 则显示 2,最新版本则当成默认值 0,来处理，如下图所示:

除此之外，计数器名还可以指定为 none 和 inherit，也就是取消计数和继承计数器，这没什么好说的。