巧用CSS counter属性

前言

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

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用来生成计数器内容。