CSS3 counter计数器

counter函数

它通常与伪元素一起使用，但理论上可以在支持值的任何地方使用

返回值

指定计数器当前的值

用法

counter(countername)

计数器的名字通过属性counter-increment，counter-reset定义。

counter-increment属性

它的值包括两部分：第一个为计数器的名字，第二个值标识递增的值（默认为1），比如：

counter-increment：count 1  /*每次递增1*/

counter-increment：count 2  /*每次递增2*/

counter-reset属性

它的值包括两部分：第一部分为计数器的名字；第二部分为计数器的起始值（默认为0），比如：

counter-reset：count 0 /*从1开始计数*/

counter-reset：count 2 /*从3开始计数*/

counter-reset：count1 0 count2 1 count3 2/*声明了三个计数器count1，count2，count3*/

与content搭配使用

content主要是跟 :after, :before,::after,::before来搭配用的。

：after{

　　content：conter(count)

}

整体例子

html：

<dl>

  < dt >example</ dt >

 < dd >example</ dd >

  < dd >example</ dd >

  < dd >example</ dd >

  < dt >example2</ dt >

  < dd >example2</ dd >

 < dd >example2</ dd >

 < dd >example2</ dd >

  < dd >example2</ dd >

</ dl >

css：

dl {  counter-reset :test 1  0 ;}

dt {  counter-increment : test 1 ;  counter-reset : test 2  0 ;}

dt:before{  content : counter (test 1 ) "、" ;}

dd{  counter-increment :test 2 ;}

dd:before{

  content : counter (test 1 ) "-" counter (test 2 ) "、" ;

}

 

效果如下：