让 css 像编程语言一样实现计数，IE 8 也支持的 css 计数器
css counters 是一个我们可以利用特定属性增减计算的变量。通过它，我们可以做一些类似编程语言的通用的迭代。
这个方式可以用于一些创造性的解决方案，包括一些重复代码的计数器。
为了控制计数器，你需要使用 counter-reset 和 counter-increment 属性，同时与 counter() 和 counters() 函数配对。如果没有地方展示计数器，这个方法就没有任何存在的价值，对此，我们可以使用简化的 content 属性。
表现也很简单。假设你有一个无序列表，你想要计算列表项。在 ul 元素上指定一个计数器，并且在 li 元素上增加计数。
counter-reset 属性
我们可以使用 counter-reset 属性定义我们的计数器变量。对于这一点，我们可以任意命名并且可选择一个计数初始值。默认起始值是 0。这个应设置在父元素。
counter-increment 属性
通过使用 counter-increment 属性，我们可以增加或减少我们的计数器的值。这个属性也有第二个可选参数值，可以指定每次增减的幅度。
counter() 函数
counter() 函数主要为了展现计数器。展示的地方就是 content 属性，因为这是一个你可以将数据通过 css 回填到 html 的属性；第一个参数是计数器变量名，第二个参数是计数器类型（可选）。
注意：在 css 中没有连接运算符，所以如果你想连接 content 属性里的两个值，只能值用空格。
counters() 函数
这个函数和 counter() 函数一样。主要的不同是 counters() 你可以嵌套计数器到另一个，就像多级嵌套的 ul 列表。它有三个参数，第一个是计数器名，第二个是分隔符，第三个参数是计数器类型（可选）。
使用案例
案例1 - 文档 issue 自动追踪
当你有一些重复的元素，并且想去统计它们，这个方法可以方便你解决这个问题。
我们创建一个 counter-reset 在我们的 .container 父级元素。之后，我们给 issues 的类名设置 counter-increment 属性。最后，我们通过 content 属性在 .issues:before 元素上输出计数器的值。
See the Pen CSS Counter Example by Adam Laki (@adamlaki) on CodePen.
案例2 - 嵌套列表
使用 counters() ，我们可以让嵌套列表实现文本编辑器里的效果。
See the Pen MrjmLX by robin-l (@robin-l) on CodePen.
案例3 - 复选框选择计数器
使用 input 的 :checked 伪类，我们可以知道复选框是否选中，因此我们也能递增我们的计数器。
See the Pen OzRmGW by robin-l (@robin-l) on CodePen.