css3的counter的用法

很早以前,計數器僅存在於ul,ol等元素中,如何想給其餘元素增長計數,就只能經過list-style-image,或者background-image來實現。不過如今css3增長了counter屬性,能夠實現任何元素的計數做用。不過這個counter屬性還須要配合其餘css屬性一塊兒纔能有效果。css

首先, counter-reset 主要功能是用來標識計數器的做用域的。它只能做用於選擇器上,它的值包括兩部分:第一部分爲計數器的名字;第二部分爲計數器的起始值(默認爲0),counter-reset還能夠同時聲明多個計數器好比:html

 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),好比:css3

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

  

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

總體例子以下:blog

 

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

  效果圖以下:作用域

相關文章
相關標籤/搜索