深入理解CSS计数器_html/css_WEB-ITnose

counter-reset:none;(默认)counter-reset:<identifier><integer>//<identifier>是计数器标识符，是创作人员自己起的一个名字//<integer>是重置的数字

counter-reset: c1 4;//表示将c1的计数器重置为4counter-reset: c1 4 c2 0 c3 -5;//表示将c1重置为4,将c2重置为0,将c3重置为-5couter-reset: c1;//将c1重置为0

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

content: counter(c1,upper-roman);//表示使用大写罗马字母格式的计数器c1     

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