目录 [1]创建计数器 [2]使用计数器 [3]demo
前面的话 我们对计数器已经不陌生了，有序列表中的列表项标志就是计数器。
创建计数器 创建计数器的基础包括两个方面，一是能重置计数器的起点，二是能将其递增一定的量。
counter-reset counter-reset:none;(默认)counter-reset://是计数器标识符，是创作人员自己起的一个名字//是重置的数字
counter-reset: c1 4;//表示将c1的计数器重置为4counter-reset: c1 4 c2 0 c3 -5;//表示将c1重置为4,将c2重置为0,将c3重置为-5couter-reset: c1;//将c1重置为0
[注意]如果不设置，则默认重置为0
counter-increment counter-increment:none;(默认)counter-increment://是计数器标识符，是创作人员自己起的一个名字//是递增的数字
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
[注意]如果不设置，则默认递增为1
使用计数器 具体使用计数器需要结合使用content属性和counter()函数
counter()函数 counter()函数接受两个参数，而且两参数之间用逗号(,)来分隔，第一个参数是计数器标识符，第二个参数设置计数器风格(可省略)，与列表中list-style-type值相同。同样的，可以使用多个counter()函数。
content: counter(c1,upper-roman);//表示使用大写罗马字母格式的计数器c1
【关于计数器风格详细下面演示框】
点击下列相应属性值可进行演示
demo 简单计数器演示 点击下列相应属性值可进行演示
代码查看
层级目录演示 点击下列相应属性值可进行演示
第一章 第一部分 第一节
第二节
第二部分 第一节
第二章 第一部分 第一节
第二节
第二部分 第一节
第三章 第一部分 第一节
第二节
第二部分 第一节

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