转载请注明出处: http://qiudeqing.com/css3/2015/07/29/counter.html

页面中经常需要在元素前添加序号,如ol会自动编号.tr, h1等需要编号可以添加span显示对应序号, 但是如果元素顺序可以替换,再修改序号就很繁琐. css提供了counter完成自动编号任务.

如何使用

CSS2.1 counter说以下三步就可以完成css counter自动计数

  1. counter-reset设置计数器及其初始值
  2. counter-increment设置哪些元素可以增加哪些计数器
  3. content内使用counter()或者counters()函数显示计数器值

下面是一个简单例子这里是在线demo:

<style>
.container {
  counter-reset: item 0;
  border: 1px solid #ddd;
}
.item {
  counter-increment: item 2;
}
.item::before {
  content: counter(item);
}
</style>

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>