CSS计数器属性能够让你更自由的控制列表的编号展示形式，不再像以前那样只是使用list-style-type:decimal来简单的显示列表的序号，还可以实现2级序号，3级序号等。让别人一眼就能看懂你的列表。主要属性有：counter-reset/counter-increment/counter/counters。一起来看看是怎么样的。
HTML代码
<div class="list">
<ul>
<li>test
<ul>
<li>subtest</li>
<li>subtest</li>
<li>subtest</li>
</ul>
</li>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test
<ul>
<li>subtest</li>
<li>subtest</li>
<li>subtest</li>
</ul>
</li>
<li>test</li>
</ul>
</div>CSS代码
首先要给父类设置counter-reset 即重置一个计数器，然后用counter-increment来递增需要的内容，最后通过CSS的伪类content来输出:counter(list),list代表上面的counter-reset的一个值。也可以用counters。
body{counter-reset:list}
ul{counter-reset:sublist}
ul{list-style:none; }
div>ul>li:before{counter-increment:list; content:counter(list) '.';}
div ul ul>li:before{counter-increment:sublist; content:counter(list) '.'counter(sublist) '.'}或者使用counters是同样的效果
ul{counter-reset:sublist}
ul{list-style:none; }
li:before{counter-increment:sublist; content: counters(sublist, ".") "."; }演示
浏览器支持
不支持IE6-IE7.支持IE8和其他高级浏览器，适用于移动端
还有人根据这个来做出一些小游戏，来看看牛人是怎么写的。
CSS计数器与动态计数呈现
您可以狠狠地点击这里：使用CSS计数器动态获得选中元素个数demo
demo中的复选框，你选中几个，就是告诉你对应选中的个数，如下截图，本人土鳖，只吃过3种：
CSS代码很简单，如下：
body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}
解释下就是，有个全局计数器icecream，每有一个复选框选中，计数值就会加1, .total就是呈现选中个数的那个标签，其任务很简单，呈现当前计数器值就可以了。
CSS计数器与数值计算小游戏
您可以狠狠地点击这里：CSS计数器实现数值计算小游戏demo
默认进入看到是这样样子：
选择对应的计算值后面就会呈现对应的结果：
当最后计算的值是72时候，就会反馈你成功了！
其实现主要借助CSS3选择器以及CSS计数器以及单复选框伪类技术。
CSS核心代码如下：
body {
counter-reset: sum;
}
input {
position: absolute;
clip: rect(0 0 0 0);
}
#number1:checked { counter-increment: sum 64; }
#number2:checked { counter-increment: sum 16; }
#number3:checked { counter-increment: sum -32; }
#number4:checked { counter-increment: sum 128; }
#number5:checked { counter-increment: sum 4; }
#number6:checked { counter-increment: sum -8; }
.sum::before {
content: '= ' counter(sum);
}
#number1:checked ~
#number2:checked ~
#number3:not(:checked) ~
#number4:not(:checked) ~
#number5:not(:checked) ~
#number6:checked ~
.sum::after {
content: ' (万岁！)';
}
其实原理跟上面的计算选中个数是一样的，不过这里呢，每个复选框计数值这里都是具体值（不是默认的1），最后，通过相邻兄弟选择器以及:checked状态判断最后结果是不是72，还是挺巧妙的。
大家有兴趣可以多多斟酌斟酌。
还有更多有趣的玩意欢迎大家去看看：http://codersblock.com/blog/fun-times-with-css-counters/
中文参考：zxx
