css 计数器是css3，只在现代浏览器中有效果
counter-reset：设置某个选择器出现次数的计数器的值。默认为 0。 就是定义一个计数器，可以定义初始值，默认是0
counter-increment：设置某个选取器每次出现的计数器增量。默认增量是 1。
demo
css 实现计数和
css
body{
margin: 0;
counter-reset: increment;
}
input{
border: none;
margin: 0;
padding: 0;
}
.number1 input[type=checkbox]:checked{
counter-increment:increment 20;
}
.number2 input[type=checkbox]:checked{
counter-increment:increment 30;
}
.number3 input[type=checkbox]:checked{
counter-increment:increment 40;
}
.number4 input[type=checkbox]:checked{
counter-increment:increment 50;
}
.number5 input[type=checkbox]:checked{
counter-increment:increment 60;
}
.sum:after{
content: counter(increment);
}html
<label class="number1"><input type="checkbox">20</label>+<label class="number2"><input type="checkbox">30</label>+<label class="number3"><input type="checkbox">40</label>+<label class="number4"><input type="checkbox">50</label>+<label class="number5"><input type="checkbox">60</label>=<p class="sum"></p>
更多css计数器相关文章请关注PHP中文网！
