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

)

"、"

;

}

 

效果如下：