CSS3计数器Counter_用CSS计算选中的复选框有几个
程序员文章站
2022-01-30 20:45:28
...
很早之前，计数器仅存在于ul，ol等元素中，如何想给其他元素增加计数，就只能通过list-style-image，或者background-image来实现。不过现在css3增加了counter属性，可以实现任何元素的计数作用。不过这个counter属性还需要配合其他css属性一起才能有效果。
css计数器
counter-reset 属性设置某个选择器出现次数的计数器的值。默认为 0。
counter-increment 属性设置某个选取器每次出现的计数器增量。默认增量是 1。
counter()插入计数器
完整代码
<!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>