css3的counter的用法

很早之前，計數器僅存在於ul，ol等元素中，如何想給其他元素增加計數，就只能通過list-style-image，或者background-image來實現。不過現在css3增加了counter屬性，可以實現任何元素的計數作用。不過這個counter屬性還需要配合其他css屬性一起才能有效果。

首先， counter-reset 主要功能是用來標識計數器的作用域的。它只能作用於選擇器上，它的值包括兩部分：第一部分為計數器的名字；第二部分為計數器的起始值（默認為0），counter-reset還可以同時聲明多個計數器比如：

 counter-reset: count 0  /*標識計數器count從1開始*/

 counter-reset: count2 2 /*標識計數器count2 從3開始*/

 counter-reset: count1 0 count3 0 count4 0 /*聲明了三個計數器，count1，count2，count3*/

　　

counter-increment 表明計數器實際用到的范圍 。他的值也包括兩部分：第一個為計數器的名字，即counter-reset設置好的名字，第二個值標識遞增的值（默認為1），比如：

counter-increment: count 1 /*表明每次遞增 1*/
    
counter-increment：count 2 /*表明每次遞增 2*/ 

　　

最后一個，content和counter搭配使用，content主要是跟 :after, :before,::after,::before來搭配用的，counter主要是給元素插入計數器的值。

整體例子如下：

 

<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>

　　

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)"、";
 }

　　效果圖如下：