Den counter-set
CSS ejendom, tro mod sit navn, sætter start værdi for en CSS tæller. Du ved, hvordan ordnede lister starter ved 1 og derefter øges derfra? Den counter-set
egenskab tillader os at sæt, der startværdi til noget andet, siger, -1. Eller 2. Eller 200! Bortset fra at den anvendes på CSS-tællere i stedet for ordnede lister.
Så lad os sige, at vi har en brugerdefineret tæller til en liste over bogkapitler, hvor kapitelnummeret er forudbestemt til kapitelnavnet.


Vi starter med at definere en tæller med counter-reset
ejendommen. Vi kalder det chapter
og definerer det på en overordnet containerklasse til vores kapitler kaldet kreativt .chapters
.
.chapters ( counter-reset: chapter; )
Dernæst tildeler vi chapter
tælleren til et element ved hjælp af counter-increment
ejendommen. Da dette er bogkapitler, anvender vi dem på
elementer, forudsat at bogtitlen er den
. Bemærk, at vi faktisk tildeler det til :before
pseudo-elementet, da det giver os mulighed for at forberede vores tæller med det faktiske
element.
h2:before ( counter-increment: chapter; )
h2:before ( counter-increment: chapter; )
Cool, det sidste, vi har brug for, er at fortælle tælleren, hvad den skal vise. Det sker på content
ejendommen via counter()
funktionen. Vi kaster også lidt farve på tælleren, da designet kræver det.
h2:before ( color: red; content: "Chapter " counter(chapter) ": "; counter-increment: chapter; )
Hej, vi ser godt ud!
Men vent! Jeg graver ikke rigtig det faktum, at vi starter med kapitel 1. Jeg mener, "fremad" er ikke rigtig et kapitel. Hvis det er noget, er det som kapitel 0.
Det er her, der counter-set
kommer ind! Lad os indstille tingene til at starte ved nul:
h2:first-of-type::before ( counter-set: chapter; )
Sådan der! Det er bedre. Bare ved at indstille egenskabsværdien til tællerens navn, har vi indstillet listen over kapitler til at starte med kapitel 0. Vi kunne lige så let have indstillet det til at starte med noget andet, som kapitel 100.
Og hvis en browser ikke understøtter counter-set
? Ikke rigtig noget. Det vil simpelthen blive ignoreret, og listen starter som standard 1
.
Syntaks
( ? )+ | none
Dette er dybest set en fancy måde at sige, at ejendommen tager navnet på en brugerdefineret tæller ( ) og startværdien (
). Eller sæt det til,
none
og nummereringen starter ved standardstartpunktet 1
.
- Startværdi:
none
- Gælder for: alle elementer (inklusive ikke-visuelle)
- Arvet: nej
- Animationstype: efter beregnet værditype
Værdier
/* Set "awesome-counter" to 0 */ counter-set: awesome-counter; /* Set "awesome-counter" to -10 */ counter-set: awesome-counter -10; /* Set "awesome1" to 0, and "awesome2" to 2 */ counter-set: awesome1 awesome2 2; /* Wipe out any other settings that may have been declared elsewhere */ counter-set: none; /* Global values */ counter-set: inherit; counter-set: initial; counter-set: unset;
Bemærk, at counter-set
der oprettes en ny tæller, hvis det angivne tællernavn ikke allerede er defineret et andet sted.
Browsersupport
IE | Edge | Firefox | Chrome | Safari | Opera |
---|---|---|---|---|---|
Ingen | Ingen | 68+ | Ingen | Ingen | Ingen |
Android Chrome | Android Firefox | Android-browser | iOS Safari | Opera Mini |
---|---|---|---|---|
Ingen | 79+ | Ingen | Ingen | Ingen |
Yderligere læsning
- CSS-lister Modulniveau 3-specifikation (arbejdsudkast)
- Visning af nuværende trin med CSS-tællere
- Tæller med CSS-tællere og gitter
- Sådan vendes CSS Custom Counters