css中的counter计数器

我们在开发页面时时常需要用到序号，如果是使用混编则可以在循环中直接取下标，但写页面更多是前后端分离，在使用js操作下就可以使用css里面提供的计数器。发现是真的好用

counter:是css计数器，只能跟content属性在一起使用的时候才起作用，而content属性专用在before/after伪元素上

由于计数器是伪元素控制显示的。因此，我们几乎可以应用各种CSS样式，各种定位等。所以，基本上，只要有有序序号呈现的地方，就能使用CSS计数器。

counter计数器的属性和方法

属性有：counter-reset、counter-increment

方法有：counter、counters

counter-reset：可以理解为“计数器-重置”的意思，有两个参数：name（必选参数）/ start（可选参数，默认值为0）。主要作用就是给计数器起名字，顺便告诉从哪个数字开始计数。

OK, 这里，先看个简单的counter-reset的例子：

<div class="start1">
  <h1>目之所及</h1>
  <h1>皆是回忆</h1> 
</div>

.start1 {
  counter-reset: myCounter;
}
.start1 h3::before {
  counter-increment: myCounter 1;
  content: counter(myCounter, lower-alpha) '. ';
}