&nbs p;
一、 CSS 计数器为哪样？
要想理解本文内容，你需要首先 了解 什么是CSS计数器，您可以查看前不久我写的 文章 “CSS计数器(序列数字字符自动递增)详解”，相当地详尽与深入。
下面的动态行为全部由 HTML 与CSS触发，没有任何JavaScript的参与， 不过 使用诸多CSS3功能，因此只在现代浏览器中有效果。OK，放下手中的工作，一起来感受下CSS的潜力吧~
二、CSS计数器与动态计数呈现
您可以狠狠地点击这里：使用CSS计数器动态获得选中元素个数demo
demo中的复选框，你选中几个，就是告诉你对应选中的个数，如下截图，本人土鳖，只 吃 过3种：
CSS代码很 简单 ，如下：
body { counter-reset: icecre am ; } input:checked { counter -i ncrement: icecream; } . total : :after { content: counter(icecream); } 解释下就是，有个全局计数器 icecream ，每有一个复选框选中，计数值就会加 1 , .total 就是呈现选中个数的那个标签，其 任务 很简单，呈现当前计数器值就可以了。
三、CSS计数器与数值计算小游戏
您可以狠狠地点击这里：CSS计数器实现数值计算小游戏demo
默认进入看到是这样样子：
选择对应的计算值后面就会呈现对应的结果：
当最后计算的值是 72 时候，就会反馈你成功了！
其实现主要借助CSS3选择器以及CSS计数器以及单复选框 伪类 技 术 。
CSS核心代码如下：
body { counter-reset: sum; } input { pos IT ion: 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 ，还是挺巧妙的。
大家有兴趣可以多多斟酌斟酌。
参考文章
Fun Times with CSS Counters（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-小tip:CSS计数器+伪类实现数值动态计算与呈现 全部内容，希望文章能够帮你解决 html5教程-小tip:CSS计数器+伪类实现数值动态计算与呈现 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-小tip:CSS计数器+伪类实现数值动态计算与呈现的详细内容...