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:test1 0;}

dt { counter-increment: test1; counter-reset: test2 0;}

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

dd{ counter-increment:test2;}

dd:before{

 content:counter(test1)"-"counter(test2)"、";

}

 

效果如下：