标签:order set reset 效果 计数器 log str margin css
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>= <div class="sum"></div>
标签:order set reset 效果 计数器 log str margin css
原文地址:http://www.cnblogs.com/xiaofenguo/p/6372863.html