前言

HTML标签中存在有序列表能帮我们将列表编号，产生的编号都是同级的，如果我们碰到复杂点的标号设置该标签就不满足我们的需求，如果一个个去设置就会繁琐，这时候我们就可以用CSS样式中的计数器去实现。

计数器

CSS计算器能够创建一个自定义的计数器，让HTML标签自动进行递增或递减，当我们想要生成目录、表格时，使用该属性会非常方便。计数器相关属性如下：

counter-reset:生成或者重置计数器。属性值有三个：
nono--没有计数器递增
id number--id就是需要递增的类名或id，有对应选择器的元素就会去计数，number就是计数编号
inherit--继承父元素
counter-increment:设置递增的编号值。具体的属性值跟counter-reset一样。
content:设置的内容，用伪类选择器:before或:after去填充内容，一般使用伪类也会用到content属性，content有多个属性值，比如text(文本)、url(链接)、counter(计数器)等。跟计数器配合使用的就是counter，运用格式为counter(name,style)，name就是选择器，style就是计数样式。重点就是conter-reset与conter-increment这两个属性，我们看下具体的小案例：

   body {
  counter-reset: chapter;
   }
h2 {
  counter-reset: section; 
}
h2:before {
  counter-increment: chapter;
  content: "Chapter " counter(chapter) ". ";
}
h3:before {
  counter-increment: section; 
  content: counter(chapter) "." counter(section) " ";
}
<section>
  <h2>标题</h2>
  <p>内容</p>
  <section>
    <h3>标题</h3>
    <p>内容</p>
    <h3>标题</h3>
    <<p>内容</p>
  </section>
  <h2>标题</h2>
  <p>内容</p>
</section>

上述我们创建了计数器chapter与section，其中h2与h3运用了section的计数器，并且用content展示出了内容。

总结

以上就是CSS中计数器的设置，利用该样式能够让我们方便地去设置目录、表格等内容，展示的效果也比我们一个个设置的要整齐。

CSS学习——计数器

前言

计数器

总结