CSS 计数器
CSS 计数器可让你根据内容在文档中的位置调整其显示的外观。例如，你可以使用计数器自动为网页中的标题编号，或者更改有序列表的编号。
本质上 CSS 计数器是由 CSS 维护的变量，这些变量可能根据 CSS 规则跟踪使用次数以递增或递减。你可以自定义一个计数器，也可以修改 list-item 这一默认生成的应用于所有有序列表的计数器。
CSS 计数器基本概念
如果仅仅增加一个 Title，大家都知道通过伪元素(:before或者:after)，设置 content 为 Title，但是如何自动根据 h3 出现的顺序来展示自动编号可能很多人就不知道了。
自动编号在 CSS 2.1 中是通过两个属性控制的，‘counter-increment’和’counter-reset’。通过这些属性定义的计数器用于’content’属性的 counter() 和 counters() 函数
基本使用
至于这两个属性怎么用，查手册？我觉得不如咱先看下代码，比看一大段描述文字来的直观的多，先看最简单的一个应用：
举例说明, html:
<h6>HTML and CSS</h6>
<h6>JavaScript</h6>
<h6>PHP</h6>
<h6>Java</h6>
css:
body {
/* 重置计数器成 0 */
counter-reset: section;
}
h6:before {
/* 增加计数器值 */
counter-increment: section;
/* 显示计数器 */
content: "Section " counter(section) ": ";
}
计数器样式
通常情况下，计数器默认是用阿拉伯数字来表示的，当然，我们也可以用其他计数器样式，上头代码里那个counter()函数还可以传入样式参数：
counter( counter_name, list_style_type )
在这里：
- counter_name： 当然指的就是counter-reset中定义的计数器变量。
- list_style_type: 计数器显示样式，可以是css中允许的任何 list-style-type 的值，当然也包括 disc, circle, square 或者 none。
嵌套计数器
以下实例在页面创建一个计数器，在每一个 “h1” 元素前添加计数值 “Section <主标题计数值>.”, 嵌套的计数值则放在 “h2” 元素的前面，内容为 “<主标题计数值>.<副标题计数值>”:
举例说明:
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment: section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content: counter(section) "." counter(subsection) " ";
}
