深入理解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

專門建立的學習Q-q-u-n： 731771211，分享學習方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
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);    
}