深入理解CSS計數器

前面的話

　　我們對計數器已經不陌生了，有序列表中的列表項標志就是計數器。

 

創建計數器

　　創建計數器的基礎包括兩個方面，一是能重置計數器的起點，二是能將其遞增一定的量。

counter-reset

counter-reset:none;(默認)
counter-reset:<identifier><integer>
//<identifier>是計數器標識符，是創作人員自己起的一個名字
//<integer>是重置的數字

counter-reset: c1 4;//表示將c1的計數器重置為4
counter-reset: c1 4 c2 0 c3 -5;//表示將c1重置為4,將c2重置為0,將c3重置為-5
couter-reset: c1;//將c1重置為0

　　[注意]如果不設置<integer>，則默認重置為0

counter-increment

counter-increment:none;(默認)
counter-increment:<identifier><integer>
//<identifier>是計數器標識符，是創作人員自己起的一個名字
//<integer>是遞增的數字

counter-increment: c1 4;//表示將c1計數器的遞增設為4    
counter-reset: c1 4 c2 0 c3 -5;//表示將c1遞增設為4,將c2遞增設為0,將c3遞增設為-5    
couter-increment: c1;//將c1計數器的遞增設為1

　　[注意]如果不設置<integer>，則默認遞增為1

 

使用計數器

　　具體使用計數器需要結合使用content屬性和counter()函數

counter()函數

　　counter()函數接受兩個參數，而且兩參數之間用逗號(,)來分隔，第一個參數是計數器標識符，第二個參數設置計數器風格(可省略)，與列表中list-style-type值相同。同樣的，可以使用多個counter()函數。

content: counter(c1,upper-roman);//表示使用大寫羅馬字母格式的計數器c1     

　　【關於計數器風格詳見下面演示框】

　　 <演示框>點擊下列相應屬性值可進行演示

 

DEMO

簡單計數器演示

　　<演示框>點擊下列相應屬性值可進行演示

層級目錄演示

            <div id="oShow">
                <h2>第一章</h2>
                <h3>第一部分</h3>
                <p>第一節</p>
                <p>第二節</p>
                <h3>第二部分</h3>
                <p>第一節</p>                
                <h2>第二章</h2>
                <h3>第一部分</h3>
                <p>第一節</p>
                <p>第二節</p>
                <h3>第二部分</h3>
                <p>第一節</p>                
                <h2>第三章</h2>
                <h3>第一部分</h3>
                <p>第一節</p>
                <p>第二節</p>
                <h3>第二部分</h3>
                <p>第一節</p>                
            </div>    

body,h2,h3,p{
    margin: 0;
}    
#oShow{
    counter-reset: c2;
}
#oShow h2{
    counter-reset: c3 cp;
    counter-increment: c2;
}
#oShow h3{
    counter-increment: c3;    
    counter-reset: cp;
    text-indent: 2em;
}
#oShow p{
    counter-increment: cp; 
    text-indent: 4em;   
}
#oShow h2:before{
    content: counter(c2);
}
#oShow h3:before{
    content: counter(c2) '.' counter(c3);
}
#oShow p:before{
    content: counter(c2) '.'  counter(c3)  '.' counter(cp);    
}

　　<演示框>點擊下列相應屬性值可進行演示