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>
