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
HTMLbody{ 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); }