通过CSS计数器对元素自动编号

CSS中的计数器（counters）类似变量；变量的取值可以根据预设的CSS规则进行递加。为了实现CSS计数器的功效，会涉及下述相关属性：

• counter-reset- 新建或重设一个计数器
• counter-increment - 设定指定计数器的每次递加的值（取值为整数，默认为1）
• content - 生成用于插入的内容
• counter()或counters()函数 - 返回指定计数器此刻的数值

备注：在使用CSS计数器务必先声明一个计数器，即使用counter-reset。

body {
    counter-reset: fuck_weapon;
}

h3::before {
    counter-increment: fuck_weapon;
    content: "兵器谱排名第" counter(fuck_weapon) "：";
}

运行一下

上例中的fuck_weapon只是给计数器设置的一个名字，可以自由定义，不必拘谨。

---

详解counter-reset

如下方代码所示，counter-reset的机制是每当遇到符合下方选择器的元素时，则指定计数器reset归零。

div {
    counter-reset: fuck_weapon;
}

运行一下

详解counter-increment

counter-increment设定指定计数器每次递加的值，这是必须设置，但是定增的值可以不声明，因为会默认为1；如要手动声明，在传入的第二个参数设置即可，可以为正整数，也可以为负整数，但是必须为整数。具体如下所示：

body {
    counter-reset: fuck_weapon;
}

h3::before {
    counter-increment: fuck_weapon 100; /* 这里设置每次递增的值 */
    content: "兵器谱排名第" counter(fuck_weapon) "：";
}

运行一下

复合计数器

上面那只是一个简单的例子，如果在没一项中继续添加一组也需要计数的子项，则会涉及多个CSS计数器的复合使用。

body {
    counter-reset: fuck_weapon;
}

h3 {
    counter-reset: progeny;
}

h3::before {
    counter-increment: fuck_weapon;
    content: "兵器谱排名第" counter(fuck_weapon) "：";
}

h4::before {
    counter-increment: progeny;
    content: counter(fuck_weapon) "." counter(progeny) " ";
}

运行一下

counters()函数

上面用了counter()函数，下面要用counters()函数来搞事，这个函数需要传入两个参数，如下所示：

counters( 计数器名称, "自定义的字符或字符串" ）

自定义的字符或字符串是用来作为分割符号，因为这个函数返回的结果可能是不只一个计数器的数值，因为元素的嵌套，很可能此时该元素下，涉及不只一个同名的计数器，因此返回的结果可能不只一个，而自定义的分割符号就是用来放在不同返回数值之间的。

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}

运行一下