本文最后更新于 696 天前，其中的信息可能已经有所发展或是发生改变。
这篇文章是作为CSS 中伪元素before或after中content的特殊用法该文章的拓展，上一篇文章对content做了一些相关用法的赘述，这篇文章专门针对content中counter（计数器）这个属性值进行相关用法的距离，用于更好的理解这个counter属性。
1、counter基本用法：
在CSS里，content中的counter属性也是配合伪元素一起使用，counter产生的数值并不存在于网页的元素内，所以如果我们要在元素之外使用，就必须透过::before或::after的content来实现。
1）CSS计数器通过一个变量来设置，根据规则递增变量。
2）使用计数器自动编号：（CSS计数器使用到以下几个属性：）
- counter–reset 创建或者重置计数器
- counter-increment 递增变量
- content 插入生成的内筒
- counter() 或者 counters()函数 将计数器的值添加到元素
3）要使用CSS计数器，得先使用counter-reset 创建：
下面实例中在body中创建了几个h1标签，然后在h1标签前为其加上计时器：
<body>
<h1>大标题</h1>
<h1>大标题</h1>
<h1>大标题</h1>
<h1>大标题</h1>
</body>
css：这里的my是自己定义的（相当于一个变量）
body{
counter-reset:my;
}
h1:before{
counter-increment:my;
content:counter(my)'.';
}
上面是官方的步骤：我们也可以不用创建我试过了也是可以的：
h1:before{
content:counter(my)'.';
}
h1{
counter-increment:my;
}
上面两种效果相同：
4）嵌套计数器：下面的例子是在页面中创建一个计时器，在每一个h1元素前面添加 计数值Section主题的计数值，嵌套的计数值这放在h2元素的前面。（下面的是一个官方的例子，后面我们自己再写一个，官方的例子都是先创建一个计数器，然后再进行操作）
<body>
<h1>HTML 教程:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML 教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>
</body>
css：
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
见一下效果：
计数器也可以用于列表中，列表的子元素会自动创建，这里我们使用了counters()函数在不同到的嵌套层级中插入字符串：
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
css：
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
见一下效果：
2、计数器属性： （计数器的属性还有更多的用法，后面会单独写demo进行测试。）
| 属性 | 描述 |
|---|---|
| content | 使用 ::before 和 ::after 伪元素来插入自动生成的内容 |
| counter-increment | 递增一个或多个值 |
| counter-reset | 创建或重置一个或多个计数器 |
