css counter

css3 中出现的 counter 属性可以配合其他一些 css 属性实现对任意元素（标签）的计数：

• counter-reset 属性用来创建或者重置计数器；
• counter-incremenrt 属性用来设置计数器的增量；
• counter 函数用于在 content 属性值中插入计数器的值。

counter-reset 属性用来创建或者重置一个计数器，它通常定义在元素选择器中，作用于该类型的元素，例如：

h1 {
    /* 声明一个起始值为0的计数器ch1 */
    counter-reset: ch1;
}

h2 {
    /* 声明一个起始值为5的计数器ch2 */
    counter-reset: ch2 5;
}

h3 {
    /* 同时声明多个计数器h3c1, h3c2, h3c3，其起始值分别为0, 3, 4 */
    counter-reset: h3c1 h3c2 3 h3c3 4;
}

counter-reset 属性的值分为两个部分：

1. 计数器的名称
2. 计数器的起始值，省略时默认为0

counter-increment 属性用来设置计数器每次递增的大小，没有声明 counter-increment 属性的计数器递增大小默认为1，例如：

h1 {
    /* 计数器h1c每次增加1 */
    counter-reset: h1c;
}

h2 {
    /* 计数器h2c每次增加3 */
    counter-reset: h2c;
    counter-increment: 3;
}

content 属性配合 :after, :before, ::after, ::before 属性可以在元素前面或者后面插入内容，counter 方法用于在属性中插入计数器的值，二者配合可以将计数器的值按照一定的格式插入到元素的前或后位置。

h2 {
    counter-reset: h2 1;
}
h2:before {
    content: "Chapter"counter(h2)". "
}

效果如下：

Chapter 1. 老人与海
Chapter 2. 小王子
Chapter 3. 月亮和六便士