码迷,mamicode.com
首页 > Web开发 > 详细

css计数器

时间:2017-02-07 10:50:38      阅读:180      评论:0      收藏:0      [点我收藏+]

标签:order   set   reset   效果   计数器   log   str   margin   css   

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>=
<div class="sum"></div>

 

css计数器

标签:order   set   reset   效果   计数器   log   str   margin   css   

原文地址:http://www.cnblogs.com/xiaofenguo/p/6372863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!