标签搜索
隐藏侧边栏

还在用JS计数吗?来试试纯CSS计数器!

搞前端的半夏
2022-04-23 / 0 评论 / 0 点赞 / 38 阅读 / 2,395 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-04-23,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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

可以使用的字符你可以查看下面的链接:
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,'.') 定义了使用 . 来进行嵌套。

0

评论区