版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/sinat_38426472/article/details/78935035
开始啦
最近发现一个css的小技巧。在以往，当我想要获取checkbox的数据数量的时候，常规的做法是使用js遍历checkbox数组，定义变量达到统计数量的效果。现在使用css完全可以实现相同的效果，简单便捷，在不操作DOM的情况下达到目的，嘻嘻
代码块
这里贴出相关代码，希望能帮到大家：
<html>
<head>
<meta charset="UTF-8">
<title>伪类计数</title>
<style type="text/css">
.box{
/*创建计数器num*/
counter-reset: num;
}
input:checked{
/*递增计数器*/
counter-increment: num;
}
.count::before{
/*统计*/
content:counter(num);
}
</style>
</head>
<body>
<div class="box">
<label><input type="checkbox" /></label>
<label><input type="checkbox" /></label>
<label><input type="checkbox" /></label>
</div>
<p class="count">计数</p>
</body>
</html>
最后
使用场景因人而异啊，第一次更新技术博客，略微有点惶恐