CSS-Zähler

CSS-Zähler ist CSS3, nur in modernen Browsern wirksam
Zähler zurücksetzen: Legen Sie den Wert des Zählers für die Anzahl der Vorkommen eines bestimmten Selektors fest. Der Standardwert ist 0. Definieren Sie einfach einen Zähler. Sie können den Anfangswert definieren. Der Standardwert ist 0. Die Standardinkrementierung beträgt 1.

DemoCSS-Implementierungszählung und CSS

HTML

 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);

        }

Weitere Artikel zum Thema CSS-Zähler finden Sie auf der chinesischen PHP-Website!