之前已经对CSS content属性进行了大概的了解，我们知道content中有一个counter属性（计数器），而使用counter的过程中我们要使用到counter-increment来递增一个或多个计数器值，其实counter-increment和counter-reset一样还有不同的玩法，这篇文章就来单独的为counter-increment属性写几个小demo记录一下：
1、counter-increment属性用来递增一个或多个计数器，counter-increment属性通常是和counter-reset属性，content属性一起使用。
2、counter-increment的属性值：
| 值 | 说明 |
|---|---|
| none | 默认。不能对选择器的计数器进行重置 |
| id number | id 定义重置计数器的选择器、id或class。number 可以设置此选择器出现次数的计数器的值 |
| inherit | 规定应该从父元素继承counter-reset属性的值 |
3、计数器是通过counter-reset和counter-increment操作，然后通过counter()或counters()函数来显示在页面上。
1）counter-increment属性默认为计数器自增1，我们也可以通过第二个参数来进行自定义。
counter-increment: record; /* 为计数器每次自增 1（默认） */
counter-increment: record 2; /* 为计数器每次自增 2 */
2）下面我们写一个小demo：
<body>
<h3>lalala</h3>
<h3>lalala</h3>
<h3>lalala</h3>
</body>
body{
counter-reset: first; /* 创建一个计数器first*/
}
h3:before {
content: counter(first)": " ;
}
h3 {
counter-increment: first 2; /* 为计数器first每次增加2 */
}
见效果：
3）我们还可以通过counter-reset来设置一个大点的初始值，然后使用counter-increment来进行递减，下面我们就来对上面的css代码进行修改：
body{
counter-reset: first 10;
}
h3:before {
content: counter(first)": " ;
}
h3 {
counter-increment: first -1;
}
效果：（可见counter-increment非常的灵活）
你要去做一个大人，不要回头，不要难过。
“我们就这样，各自奔天涯。”
