css3 counter属性简介说明


摘要:
下文讲述css3中counter属性的简介说明,如下所示:

html元素中ul、ol元素是一个列表项,拥有元素计数,那么其它的Html子元素是否有计数信息显示呢?
例:
我们如何对div下面的子div使用css输出其计数信息呢?

带着这些疑问,css3推出了counter属性,可以实现任何元素的计数操作,如下:


counter属性的功能及用法

counter属性的功能:生成元素计数信息
counter属性需结合 counter-reset(设置计数器的初始值及计数器所作用的元素) counter-increment(计数器每次增加的步长) 才能生成计数值
例:
counter-reset: qty 0
/*定义计数器名字为”qty”从1开始*/
counter-reset: qty 3
/*定义计数器名字为”qty”从3开始*/
counter-reset: qtyA 3 qtyB 9 qtyC 10
/*定义三个计数器 qtyA 从3开始 qtyB 从9开始 qtyC 从10开始 */

  
counter-increment: qty 10 /*qty计数器每次增加 10*/
counter-increment:qty 22 /*qty计数器每次递增 22*/

最后使用counter调用计数器生成计数信息,结合:after或:before中的content属性,将计数信息输出至元素上


counter属性的举例应用

 <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <meta name="Author" content="http://www.maomao365.com"> 
  <title>猫猫教程(www.maomao365.com)
  ---counter计数器的应用
  </title>
 <style>

p{counter-increment: qty 1;counter-reset: qtya 0; }
span{counter-increment: qtya 1; }


p:before{ content:counter(qty)"、";}
span:before{ content:counter(qty)"-"counter(qtya)"、";}
span{
  display:block;
  text-indent:10px;
}
 </style>

 </head>
 <body>
    
<div>
   <p>大类一</p>
     <span>猫猫教程</span>
	 <span>猫猫教程</span>
	 <span>猫猫教程</span>

     <p>大类二</p>
     <span>猫猫教程</span>
	 <span>猫猫教程</span>
	 <span>猫猫教程</span>
	  <span>猫猫教程</span>
</div>
 
</body>
</html>
css counter属性举例说明

css counter属性举例说明