zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    GC(垃圾分代收集)
    排序算法总结
    Redis中的数据结构
    事务的隔离性(续篇)
    手写Spring mvc框架 (二)
    MySql日志与事务的隔离级别
    手写Spring mvc框架 (一)
    IO流
    随笔三(Ajax)
    关于博主noble_
  • 原文地址:https://www.cnblogs.com/xiaofenguo/p/6372863.html
Copyright © 2011-2022 走看看