Den counter-reset
egenskab gør det muligt for automatisk nummerering af elementer. Ligesom en ordnet liste (
- ), men det fungerer på ethvert element. Det er især nyttigt ved oprettelse af en indholdsfortegnelse eller nummereringsoverskrifter til noget som et speciale. Tællerne anvendes via indholdsejendommen. Et simpelt eksempel:
er navnet på den tæller, du vil nulstille
er den værdi, som tælleren skal nulstilles til
none
deaktiver tælleren- counter-reset i spec
- counter-reset ved MDN
article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )
Den counter-reset
egenskab bruges til at nulstille en CSS imod en given værdi.
Det er en del af CSS-tællermodulet, som er en del af det genererede indhold, den automatiske nummerering og viser CSS2.1-specifikationen, udvidet i Genereret og udskiftet indholdsmodul CSS3-specifikation.
Syntaks
counter-reset: ( ?)+ | none
Hvor…
body ( counter-reset: my-awesome-counter 0; )
Bemærk: standardværdien for heltal er 0. Hvis der ikke er angivet et heltal efter tællernavnet, nulstilles det til 0. Dette fungerer således som forventet:
body ( counter-reset: my-awesome-counter; )
Du kan nulstille flere tællere på én gang med en pladsadskilt liste, hver med sin specifikke værdi, hvis du ønsker det.
body ( counter-reset: my-awesome-counter 5 my-other-counter; )
Dette nulstilles my-awesome-counter
til 5 og my-other-counter
til standardværdien: 0.
Du kan se denne liste som: counter1 value1 counter2 value2 counter3 value3…
. Hvis en værdi udelades, er den 0.
Demo
I den følgende demo article
nulstilles section
mod standardværdien (0), som derefter øges ved hver sektionsforekomst og derefter vises foran sektionens overskrifter.
Tjek denne pen!
Mere information
Browsersupport
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
2+ | 3.1+ | Nogen | 9.2+ | 8+ | Nogen | Nogen |