大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！
前言
不知道有多少人做过自己的博客，在生成文章目录的时候，有没有人是下图样式的：
会在标题前面加上数字编号的，大部分的实现方案是什么呢？我一开始是在遍历的时候加上数字编号的，不过这样的JS代码很多。需要判断层级数很麻烦。直到我发现纯css的counter属性！
计数器
CSS的计数器通过在 content 上应用 counter() 或 counters()函数来显示计数的。其中计数器是由counter-reset和counter-increment 来进行操作的。
counter-increment
语法
counter-increment: 计数器名称 数字值 可选值；
数字值：默认就是初始值（当你不使用counter-reset），并且表示步长。
可选值:none。
可以定义多个计数器。
单个计数器
p{
counter-increment: myCounter 1;
}
p::before{
content: counter(myCounter);
}
多个计数器
p{
counter-increment: myCounter 1 mycount2 2;
}
当然样式比较奇怪。你可以对p::before进行改造。
比如说这样：
同属于一个父元素才会累计
p {
counter-increment: myCounter 1 mycount2 2;
}
<div>
<p>span1</p>
<p>span1</p>
</div>
<div>
<p>span21</p>
<p>span21</p>
</div>
如图所示:p标签所属在两个div标签，计数会重新开始。
counter-reset
重置计数器。
语法： counter-reset: 计数器的名字 数字值；
计数器的名字必须和counter-increment定义的一致。
数字值：初始值重置。刚才我们在介绍counter-increment的数字值的时候，有这样一句话：
计数器的初始值就变成了：reset的数字值+increment的数字值。，步长仍然是increment的数字值。
同样的reset可以同时重置多个计数器。
重置单个计数器
body {
counter-reset: myCounter 2;
}
p {
counter-increment: myCounter 2;
}
这里我们在body重置计数器，在p中定义这个计数器的步长。
最后的效果就是初始值为2+2 步长为2
必须在counter-increment之前。
这是啥意思呢？
span {
counter-reset: myCounter 2;
}
p {
counter-increment: myCounter 2;
}
<div>
<p>span1<span>在p里面</span></p>
</div>
通过这张图可以看到，span标签是在p里面的我们把reset放在了span上，reset就无法生效。
reset和increment不要放在同一个标签
例如这样写，会导致什么效果呢，大家可以想一想
p {
counter-increment: myCounter 2;
counter-reset: myCounter 2;
}
其实结果就是每个span都是4，因为每一个p在生成的时候，计数器都会重置为2.
所以笔者建议：
reset放在父元素increment放在当前元素
或者 reset放在当前元素increment放在:before或者:after元素.
counter
使用计数器，并定义计数器的计数器样式。 语法： counter(计数器名称，计数器样式)
计数器样式 比如；
upper-roman：I, II, III, IV, V…
lower-greek：α, β, γ…
lower-alpha： a, b, c, … z
可以使用的字符你可以查看下面的链接： developer.mozilla.org/zh-CN/docs/…
当然你也可以使用@counter-style 进行自定义。
举例
p::before {
content: counter(myCounter,armenian) ' ' ' ';
}
counters()
counters 与counter的区别是啥，就是一个s，这个s就代表着counters是为嵌套计数而生的。 语法：
counters(计数器名, 嵌套样式, 计数器样式 )
还记得这个图吧，我们就来实现它。
首先是有两层，每一层都是从1开始的。
ol{
counter-reset: myCounter 0;
list-style-type: none;
}
li::before {
counter-increment: myCounter 1;
content: counters(myCounter,'.') ' '' ';
}
<ol>
<li>counter是什么</li>
<li>counter的使用步骤
<ol style="padding-left:20px">
<li>引入</li>
<li>编写</li>
</ol>
</li>
</ol>
这里我们使用了ol和li,首先我们是在ol上reset的，所以每次遇到ol计数器都会重置，保证了每层都是从1开始。同时counters(myCounter,'.') 定义了使用 . 来进行嵌套。
