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
++++=
更多css计数器相关文章请关注PHP中文网!










