css 如何让页面上的div产生自编号效果呢?


摘要:
下文讲述使用css counter和counter-increment属性为div对象生成自编号的方法分享,如下所示:

 
实现思路:
     1.在css中为div对象定义一个计数器counter-increment
     2.使用伪类 :before在div对象的前面加入content,并放入计数内容

例:
为页面中的div对象设置一个计数器

 <meta charset="utf-8" /> 
<style>   
  div{
    background-color:green;
    color:white;
    width:180px;height:60px;
    line-height:60px;
    padding-left:20px;
    margin:10px;
    
    counter-increment:jiShuQi;
  }
  /*使用伪类 :before
   在div前面加上自编号*/
div:before{
     content:"第"counter(jiShuQi)"段:";
  }
</style>
<P>
 maomao365.com<br />
 让div产生自编号效果
</p>
<hr /> 
<div>猫猫教程-div1</div>
<div>猫猫教程-div2</div>
<div>猫猫教程-div3</div>
<div>猫猫教程-div4</div> 
 
<hr/ >

<div>猫猫教程-div5</div> 
css为div对象生成自编号的方法分享

css为div对象生成自编号的方法分享