【原文】http://www.zhangxinxu.com/wordpress/2014/12/css-counters-pseudo-class-checked-numbers/
一、CSS计数器为哪样？
要想理解本文内容，你需要首先了解什么是CSS计数器，您可以查看前不久我写的文章“CSS计数器(序列数字字符自动递增)详解”，相当地详尽与深入。
下面的动态行为全部由HTML与CSS触发，没有任何JavaScript的参与，不过使用诸多CSS3功能，因此只在现代浏览器中有效果。OK，放下手中的工作，一起来感受下CSS的潜力吧~
二、CSS计数器与动态计数呈现
您可以狠狠地点击这里：使用CSS计数器动态获得选中元素个数demo
demo中的复选框，你选中几个，就是告诉你对应选中的个数，如下截图，本人土鳖，只吃过3种：
CSS代码很简单，如下：
body {
counter-reset: icecream;
}
input:checked {
counter-increment: icecream;
}
.total::after {
content: counter(icecream);
}