之前已经对CSS content属性进行了大概的了解，我们知道content中有一个counter属性（计数器），而使用counter的过程中我们要使用到counter-reset来创建计数器或者重置计数器，其实counter-reset还有不同的玩法，我们下面就来写几个demo看一下：
1、counter-reset属性用于创建或重置一个或多个计数器，counter-reset属性通常是和counter-increment属性，content属性一起使用。
2、counter-reset的属性值：
| 值 | 说明 |
|---|---|
| none | 默认。不能对选择器的计数器进行重置 |
| id number | id 定义重置计数器的选择器、id或class。number 可以设置此选择器出现次数的计数器的值 |
| inherit | 规定应该从父元素继承counter-reset属性的值 |
3、计数器是通过counter-reset和counter-increment操作，然后通过counter()或counters()函数来显示在页面上。
1）在使用counter-reset前，必须要通过counter-reset重置一个初始值，它默认是0，你也可以指定初始值。
counter-reset: record; /* 重置计数器为 0 */
counter-reset: record 2; /* 重置计数器为 2 */
2）除此之外，它的值还可以是多个。
<body>
<h3>lalala</h3>
<h3>lalala</h3>
<h3>lalala</h3>
</body>
body{
counter-reset: first 2 second 4;
}
h3:before {
content: counter(first) counter(second) ": ";
}
h3 {
counter-increment: first second;
}
见效果：
3）我们还可以通过其它的css代码来修改计数器的样式：
body{
counter-reset: my;
}
h1:before{
content:'第'counter(my)'章';
color:red;
font-size:42px;
}
h1{
counter-increment:my;
}
效果：
你要去做一个大人，不要回头，不要难过。
“我一个人在路上，偶尔想起你。”
