现在既是起点
很多事情自己都没有考虑很多，考虑很清楚。感觉浑浑噩噩的过了这么多时间，积攒了很多的“后悔”。就从这本 CSS 世界开始认真努力，争取挽回一些事情吧。俗话说，择日不如撞日，就从 4.1.2 第六节这个奇怪的位置开始记录。第一次认真写文章记录自己的所学，有这样那样的缺点那是肯定的，总之迈开第一步，慢慢变好吧。
简介
很喜欢书中的各种比喻，就从这个将 content 计数器比喻成班级报数开始吧。
- 班级命名：
counter-reset
设置计数器名称，设置计数默认值 0
/* 计数器名称是 counter1、counter2，并且默认起始值是 2 和 1，可以重复命名*/
.xxx {
counter-reset: counter1 2 counter2 1;
}
.xxx::before {
content: counter(counter1);
}
.xxx::after {
content: counter(counter2);
}
来着张鑫旭大神的网站 demo
- 报数规则：
counter-increment
/* 可以一次递增两个，还可以设置递增值，还可以设置负数，还可以设置 none 和 inherit */
.xxx {
counter-increment: counter1 -1 counter2 2;
}
计数递增有个普照规则，就是应用计数器的时候会立即执行递增操作，这样导致默认值看似为 1。无论 counter-increment 在什么地方，只要有 counter-increment 对应的计数器就会增加一次，有两个就增加两次。demo
计数器的数值变化遵循 HTML 渲染顺序，遇到一个 increment 计数器就变化，什么时候 counter 输出就输出此时的计数值。
- 开始报数：counter()/counters()
这是一个方法，作用是显示计数。style 可以设置 list-style-type 可以设置的值，计数器不光可以记数字，还可以是英文字母或者罗马文等。
/* 支持级联，即一个 content 设置多个计数器 */
.xxx::before {
content: counter(counter1,style) '\A' counter(counter2);
}
counters() 可以嵌套计数。counter 计数为 1，2，3，4... 而 counters() 计数为 1-1，1-2，1-3... string 则是用来设置中间的连接符号 '-'。连接符号左右的数字根据嵌套层级上的计数器来计数，比如父元素上的计数器控制前面的 1，子元素上的计数器控制后面的 1，2，3。计数重置和计数显示不能以兄弟形式放在一起。例子
counters(name, string)
