上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>计数</title>
<style type="text/css">
body{
counter-reset: fruit;
}
input:checked{
counter-increment:fruit;
}
.total:after{
content:counter(fruit);
}
</style>
</head>
<body>
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<input type="checkbox" name='fruit'>水果
<p class='total'></p>
</body>
</html>
counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
counter()插入计数器