我们对计数器已经不陌生了，有序列表中的列表项标志就是计数器。

创建计数器
创建计数器的基础包括两个方面，一是能重置计数器的起点，二是能将其递增一定的量。

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