Mot tilbakestilling - CSS-triks

Den counter-resetegenskapen gjør det mulig for automatisk nummerering av elementer. Som en bestilt liste (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

Den counter-resetegenskapen brukes til å tilbakestille en CSS telleren til en gitt verdi.

Det er en del av CSS-tellermodulen som er en del av det genererte innholdet, den automatiske nummereringen, og viser CSS2.1-spesifikasjonen, utvidet i generert og erstattet innholdsmodul CSS3-spesifikasjon.

Syntaks

counter-reset: ( ?)+ | none

Hvor…

er navnet på telleren du vil nullstille
er verdien du vil nullstille telleren til
none deaktiver disken

body ( counter-reset: my-awesome-counter 0; )

Merk: standardverdien for heltallet er 0. Hvis det ikke er satt noe heltall etter tellernavnet, tilbakestilles det til 0. Dermed fungerer dette som forventet:

body ( counter-reset: my-awesome-counter; )

Du kan tilbakestille flere tellere samtidig med en plassskilt liste, hver med sin spesifikke verdi hvis du ønsker det.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Dette tilbakestilles my-awesome-countertil 5 og my-other-countertil standardverdien: 0.

Du kan se denne listen som: counter1 value1 counter2 value2 counter3 value3… . Hvis en verdi er utelatt, er den 0.

Demo

I følgende demo articletilbakestilles sectionmot standardverdien (0), som deretter økes ved hver seksjonsforekomst, og deretter vises foran seksjonsoverskriftene.