Heim > Web-Frontend > CSS-Tutorial > CSS-Zähler

CSS-Zähler

高洛峰
Freigeben: 2017-02-11 11:52:48
Original
1444 Leute haben es durchsucht

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

        }
Nach dem Login kopieren

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

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage