css counters 的属性

  • counter-reset
  • counter-increment
  • counter() / counters()

依次说明：

1.counter-reset。

明译为计数器重置。形如：counter-reset: level1

其中，level1 只是示例，实际上是可以任意命名的一个名字标识符。

按我的理解，counter-reset 的真实意思是：在目标元素所在的层级中定义一个计数器。

2.counter-increment

明译为计数器累加。形如： counter-increment: level1 1

其中，level1 是通过 counter-reset 定义的计数器名，这里的 1 也可以是任意其他整数，甚至可以是负数。当浏览器渲染页面时，带这个属性的元素每出现一次，当前层级内对应名字的计数器就增加相应的值。如不写，默认是 1。

3.counter() / counters()

前面两个属性定义了计数器和计算规则，不过，这些计数器的计算目前都是在内存中进行的。counter() 和 counters() 就负责把计数器显示出来。这两个计算方法要和伪元素的 content 属性搭配食用。形如：content: counter(level1)。counter 计算符前后可以随意加字符串来对最后的效果做拼接。

*注意：当 couner() 一个没有定义过的计数器时，会显示 1。

优先级：

在元素自身上定义的计数器 > 在元素兄弟元素上定义的计数器 > 在元素父元素上定义的计数器

另外，元素无法访问到其兄弟元素的子元素定义的计数器。


链接：https://juejin.cn/post/6844903503492546568