巧用CSS counter属性

前言


你一定遇到过这样的排版,如实现步骤条、给文章编号等。如果写固定的编号,增删步骤或者章节时,后续的编号都需要手动更改。这样会很麻烦。


image.png
image.png


CSS 提供了计数器功能,可以动态设置编号。


CSS计数器


要实现CSS计数器的,先了解CSS计数器的属性和方法


counter-reset
counter-increment
counter()

counter-reset


counter-reset 用于定义和初始化一个或者多个css计数器。设置计数器的名称和初始值。
使用语法:


counter-reset:[<标识符><整数>?]+|none|inherit

每个计数器名称后面都可以跟一个可选的<整数>值,该值指定计数器的初始值。
计数器的初始值不是计数器显示时的第一个数字,如果希望计数器从1开始显示,则需要设置coutter-reset中的初始值设置为0。


someSelector{
counter-reset:counterA;/*计数器counterA初始,初始值为0*/
counter-reset:counterA 6;/*计数器counterA初始,初始值为6*/
counter-reset:counterA 4 counter B;/*计数器counterA初始,初始值为4,计数器counterB初始,初始值为0*/
counter-reset:counterA 4 counterB 2;/*计数器counterA初始,初始值为4,计数器counterB初始,初始值为2*/
}

counter-increment


counter-increment属性用于指定一个或多个CSS计数器的增量值。它将一个或多个标识符作为值,指定要递增的计数器的名称。


使用语法:


counter-increment:[<标识符><整数>?]+|none|inherit

每个计数器名称(标识符)后面都可以跟一个可选<整数>值,该值指定对于我们所编号的元素每次出现时,计数器需要递增多少。默认增量为1。允许零和负整数。如果指定了负整数,则计数器被递减。


counter-increment属性必须和counter-reset属性配合使用


article{/*定义和初始化计数器*/
  counter-reset:section;/*'section'是计数器的名称*/
}
article h2{/*每出现一次h2,计数器就增加1*/
  counter-increment:section;/*相当于计数器增量:第1节;*/
}

couter()


counter()函数必须和content属性一起使用,用来显示CSS计数器。它以CSS计数器名称作为参数,并作为值传递给content属性,而content属性就会使用:before伪元素将计数器显示为生成的内容。


h2:before{
  content:counter(section);
}

counter()函数有两种形式:counter(name)和counter(name,style)。
name参数就是要显示的计数器的名称;使用counter-reset属性就可以指定计数器的名称。


couters()


counters()函数也必须和content属性一起使用,用来显示CSS计数器。和counter()函数一样,counters()函数也作为值传递给content属性;然后,content属性在使用:before伪元素将计数器显示为生成的内容。


counters()函数也有两种形式:counters(name,string)和counters(name,string,style)。
name参数也是要显示的计数器的名称。可以使用counter-reset属性来指定计数器的名称。


而counters()函数与counter()函数(单数形式)区别在于:counters()函数可以用于设置嵌套计数器。


嵌套计数器是用于为嵌套元素(如嵌套列表)提供自动编号。如果您要将计数器应用于嵌套列表,则可以对第一级项目进行编号,例如,1,2,3等。第二级列表项目将编号为1.1,1.2,1.3等。第三级项目将是1.1.1,1.1.2,1.1.3,1.2.1,1.2.2,1.2.3等。


string参数用作不同嵌套级别的数字之间的分隔符。例如,在'1.1.2'中,点('.')用于分隔不同的级别编号。如果我们使用该counters()函数将点指定为分隔符,则它可能如下所示:


  content:counters(counterName,".")

  如果希望嵌套计数器由另一个字符分隔,例如,如果希望它们显示为“1-1-2”,则可以使用短划线而不是点作为字符串值:


  content:counters(counterName,"-")

总结


使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括:使用CSS Counters给元素创建自动递增计算器不仅仅是依赖于某一个CSS属性来完成,他需要几个属性一起使用才会有效果。使用的到属性包括:



  • counter-reset: 定义计数器的名称和初始值。
  • counter-increment:用来标识计数器与实际相关联的范围。
  • content:用来生成内容,其为:before:after::before::after的一个属性。在生成计数器内容,主要配合counter()一起使用。
  • counter():该函数用来设置插入计数器的值。
  • :before :after:配合content用来生成计数器内容。


链接:https://juejin.cn/post/7010031620983881735

0 个评论

要回复文章请先登录注册