计数器(counter)，“老一辈”程序员估计对这个东西印象深刻，早期的网站页面上经常会有这个东西，如今这种特征都变成了笑话。CSS里自己实现了一种计数器，很简单，很直接。使用CSS计数器，你可以实现简单的纯CSS的计数功能，并能将其显示到页面上。下面我们简单的看一下CSS计数器是如何使用的！
初始化CSS计数器
为了好理解，我们使用<OL> 和 <LI> 元素来做演示。首先我们要重置计数器，让它归零，并给它指定一个名称：
CSS Code复制内容到剪贴板
ol.slides{countercounter-reset:slideNum;}这个计数器叫slideNum，下面的例子都都要使用它。
CSS计数器的自增
为了是计数器能够自增，我们需要使用counter-increment，并把计数器的名称跟到后面：
CSS Code复制内容到剪贴板
ol.slides>li{countercounter-increment:slideNum;}这样，在CSS选择器下，每遇到一个符合条件li元素，counter-increment就会被调用一次，计数就是增加1。需要注意的是，这里的CSS选择器里使用了>符号，这样是为了滤掉有可能多重嵌套的li元素。否者你的计数值就会不是你想要的。
使用计数值
如果只计数而无法显示，那这个计数器也没多大用处，所以就有了counter()命令来输出计数器里的值，可以用在content属性里：
CSS Code复制内容到剪贴板
ol.slidesli:after{content:"["counter(slideNum)"]";}有趣的是，这个counter()命令还可以接受第二个参数，当作同时计算多个元素时数据的分隔符：
假设有这样的HTML:
XML/HTML Code复制内容到剪贴板
<olclass="toc"><li>Intro</li><li>Topic<ol><li>Subtopic</li><li>Subtopic</li><li>Subtopic</li></ol></li><li>Topic<ol><li>Subtopic</li><li>Subtopic</li><li>Subtopic</li></ol></li><li>Closing</li></ol>我们这样来写：
CSS Code复制内容到剪贴板
ol.toc,ol.tocol{countercounter-reset:toc;}olli{countercounter-increment:toc;}.tocli:before{content:"(Item"counters(toc,".")")";}会输出下面的结果
XML/HTML Code复制内容到剪贴板
<olclass="toc"><li>(Item1)Intro</li><li>(Item2)Topic<ol><li>(Item2.1)Subtopic</li><li>(Item2.2)Subtopic</li><li>(Item2.3)Subtopic</li></ol></li><li>(Item3)Topic<ol><li>(Item3.1)Subtopic</li><li>(Item3.2)Subtopic</li><li>(Item3.3)Subtopic</li></ol></li><li>(Item4)Closing</li></ol>
你可以发现，当需要显示这种联级嵌套序号时，这种技术是非常的有用的。很像微软WORD里面文档的多重序号。
在 counter-reset 属性中，定义了一个随机 ID，其默认值是0。你可以在 counter-increment 属性中定义另外一个数字，作为计数的步长。
例如：counter-increment: i 2 将值显示偶数。
大多时候，CSS计数器都是配合:after和:before伪元素使用，我曾看到过有人在幻灯片、视频页面和文档里用过CSS计数器。相信你会找到其它可以使用它的地方。
CSS 计数器进阶
利用 CSS 计数器，能统计被用户选择的复选框个数：
CSS Code复制内容到剪贴板
<divclass="languages"><inputid="c"type="checkbox"><labelfor="c">C</label><inputid="C++"type="checkbox"><labelfor="C++">C++</label><inputid="C#"type="checkbox"><labelfor="C#">C#</label><inputid="Java"type="checkbox"><labelfor="Java">Java</label><inputid="JavaScript"type="checkbox"><labelfor="JavaScript">JavaScript</label><inputid="PHP"type="checkbox"><labelfor="PHP">PHP</label><inputid="Python"type="checkbox"><labelfor="Python">Python</label><inputid="Ruby"type="checkbox"><labelfor="Ruby">Ruby</label></div><pclass="total">Totalselected:</p>.languages{countercounter-reset:characters;}input:checked{countercounter-increment:characters;}.total:after{content:counter(characters);}在这个示例中，我们会增加 input:checked 的数量并打印出来。
你还能创建一个小型计算器：
CSS Code复制内容到剪贴板
<divclass="numbers"><inputid="one"type="checkbox"><labelfor="one">1</label><inputid="two"type="checkbox"><labelfor="two">2</label><inputid="three"type="checkbox"><labelfor="three">3</label><inputid="four"type="checkbox"><labelfor="four">4</label><inputid="five"type="checkbox"><labelfor="five">5</label><inputid="one-hundred"type="checkbox"><labelfor="one-hundred">100</label></div><pclass="sum">Sum</p>.numbers{countercounter-reset:sum;}#one:checked{countercounter-increment:sum1;}#two:checked{countercounter-increment:sum2;}#three:checked{countercounter-increment:sum3;}#four:checked{countercounter-increment:sum4;}#five:checked{countercounter-increment:sum5;}#one-hundred:checked{countercounter-increment:sum100;}.sum::after{content:'='counter(sum);} 
