Home  >  Article  >  Web Front-end  >  深入理解CSS计数器_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:32:241406browse

目录 [1]创建计数器 [2]使用计数器 [3]DEMO

前面的话

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

 

创建计数器

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

counter-reset

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

  [注意]如果不设置,则默认重置为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

  [注意]如果不设置,则默认递增为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);    }

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn