你的位置:首页 > 网页设计

[网页设计]深入理解CSS计数器


目录
[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

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

  [注意]如果不设置<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);  }