#yyds干货盘点#还在用JS计数吗？来试试纯CSS计数器！！！

Posted 2021-12-28 半夏话前端

​

创作不易，点个赞再看呗!

关注专栏，让你走进CSS世界的深处

前言

不知道有多少人做过自己的博客，在生成文章目录的时候，有没有人是下图样式的：

会在标题前面加上数字编号的，大部分的实现方案是什么呢？我一开始是在遍历的时候加上数字编号的，不过这样的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 可以使用的字符你可以查看下面的链接：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/list-style-type

当然你也可以使用@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,.) 定义了使用 . 来进行嵌套。