CSS计数器不是什么新鲜玩意了，早在10年春暖花开的时候，我写的“CSS content内容生成技术以及应用”一文就要提到（见下图），不过当时是作为其中一员介绍。就像例行的溜新同事一样，虽然黑如焦炭的我在自我介绍的时候给新同事留下了深刻印象，但由于介绍的同事茫茫多，我只是其中一员。很自然，个把月之后，我就会被无情的淡忘，除了那依稀的面庞，因为毕竟长得还算比较抽象。
然而，CSS计数器的斗量显然不是短短几句介绍能够显露的，所谓人不可貌相。就像我，说不定某年某月，当年像驴子一样被溜的新同事终于脑袋被门夹了，想起了我的音容笑貌，找我来寻求帮助呢！
我最近就遇到这样的情况。
给部门同事做点果汁系统的时候，由于果汁店经常会有水果因果品爆发被N多靓妹相中而缺货，因此，每人可以选择三种自由搭配的饮品。于是，就有了第1选择、第2选择、第3选择……
本来我是纯文字写在标签里的。好重好累，感觉不会再爱了！此时，突然眼前一道白光，午休时间结束，阿姨把办公室的灯打开了。这恍如隔世的念闪让我突然想起了当年大明湖畔的“CSS计数器”。想当年，移动web还是草莽，IE六七兴风作浪。这诱人的技能就算昭告于世也是受制于兼容大环境而腰斩的命。
但是现在不一样了，我们赶上了一个更好的时代：英语老师从事传统工业生产锤子，影视明星舍身取义集体赴监狱拍摄大片；以前那些受制于IE6/IE7不兼容而不见天日的高级CSS/JS特性也纷纷走到了台前，CSS计数器就是其中一员。于是，我拿起我平时钓鱼挖蚯蚓的小锹去挖CSS计数器的坟。虽然目前网上已有一些介绍CSS计数器的文章，但大多不够全面，案例不够精彩，查阅也不方便。就像是租的房子，虽然也能挡风遮雨，但装修风格不是自己的，还寄人篱下，保不准房东借个东风就把我吹走了。所以啊，有必要自己留一手，去挖个坟然后建个房。
对于纯洁的技术圈而言，挖坟并不可耻。我们重新去挖掘过去的那些文章知识，好像一个考古学家去挖掘尘封的历史、消失的文明一般，是件很有价值的事情。所以，如果大家对挖掘考古感兴趣，就跟我一起去挖挖挖~~
CSS计数器只能跟content属性在一起的时候才有作用，而content属性貌似专门用在before/after伪元素上的。于是，就有了，“计数器↔伪元素↔content属性”的铁三角关系。
CSS计数就跟我们军训报数一样的！现在，让我们的静静地闭上眼睛，让思绪飞到青葱的大学，那个炎热的夏日，那个宽广的军训场地，你…想到了什么？——“隔壁班的那个妹子长得好水灵好可爱我好喜欢”。囧，还有呢？——“露着大腿的漂亮师姐从面前悠然走过，留下一阵芬芳，掳走我的心房”。……
成心找抽啊！就算色心满满，脑袋插满刀子，也应该想到，帅气的教官有木有！共苦的基友有木有！嘹亮的口号有木有！犀利的报数有木有！
说到报数，是否想起了教官的嘹亮口号：“生信4班，立正，稍息，开始1,2,3,4报数！”
其中有这么几个关键点：
1. 班级命名。总不能六脉神剑一指，你，侬，汝来称呼吧~有个称呼，如生信4班，就知道谁的是谁了。
2. 报数规则。1,2,3,4递增报数，还是1,2,1,2报数，让班级的人知道。
3. 开始报数。不发口令，大眼瞪小眼，会乱了秩序。
巧的是，以上3个关键点正好对应CSS计数器的2个属性和1个方法，依次是：
1. counter-reset
2. counter-increment
3. counter()/counters()
依次说来。
1. counter-reset
顾名思意，就是“计数器-重置”的意思。其实就是“班级命名”，主要作用就是给计数器起个名字。如果可能，顺便告诉下从哪个数字开始计数。默认是0, 注意，默认是0而不是1. 可能有同学回疑惑，尼玛网上的各种例子默认显示的第1个数字不都是1吗？那是因为受了counter-increment普照的影响，后面会详细讲解。
OK, 这里，我们先看两个简单的counter-reset的例子：
- .xxx { countercounter-reset: small-apple; } /* 计数器名称是'small-apple' */
- .xxx { countercounter-reset: small-apple 2; } /* 计数器名称是'small-apple', 并且默认起始值是2 */
闻名不如见面，您可以狠狠地点击这里：counter-reset值为2简单demo
counter-reset的计数重置可以是负数，例如-2。也可以写成小数，例如2.99，不过就是IE和FireFox都不识别，认为是不合法数值，直接无视，当作默认值0来处理；不过Chrome不嫌贫嫉富，任何小数都是向下取整，如2.99当成2处理，于是王小二还是那个王小二。
到此为止？非也非也！counter-reset还有一手，就是多个计数器同时命名。例如，王小二和王小三同时登台：
.xxx { counter-reset: wangxiaoer 2 wangxiaosan 3; }
直接空格分隔，譬如逗号什么的都不行。
闻名不如见面，您可以狠狠地点击这里：两个技术名称并存demo
另外，counter-reset还可以设置为none和inherit. 干掉重置以及继承重置。你懂的，就不展开了。
2. counter-increment
顾名思意，就是“计数器-递增”的意思。值为counter-reset的1个或多个关键字。后面可以跟随数字，表示每次计数的变化值。如果缺省，则使用默认变化值1（方便起见，下面的都使用默认值做说明）。
CSS的计数器的计数是有一套规则的，我将之形象地称为“普照规则”。具体来讲就是：普照源(counter-reset)唯一，每普照(counter-increment)1次，普照源增加1次计数值。
于是，我们可以解释上面提到的“默认值是0”的问题。通常CSS计数器应用的时候，我们都会使用counter-increment, 肯定要用这个，否则怎么递增呢！而且一般都是1次普照，正好+1，第一个计数的值就是1啦(0+1=1)！
下面，通过几个例子，给大家形象地展示下普照规则。
① 您可以狠狠地点击这里：王小二counter-increment普照成王小三demo
demo中，王小二的counter-reset值是wangxiaoer 2，但是，显示的计数不是小2而是小3，王小二变成了王小三！ 
Demo相关核心代码为：
这里counter-increment普照了p标签，counter-reset值增加，默认递增1，于是计数从设置的初始值2变成了3，wangxiaoer就是这里的计数器，自然伪元素content值counter(wangxiaoer)就是3.
② 当然，也可以普照自身，也就是counter-increment直接设置在伪元素上：