Counter-reset - CSS-tricks

Anonim

Den counter-resetegenskab 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:
    article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

    Den counter-resetegenskab 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…

    • er navnet på den tæller, du vil nulstille
    • er den værdi, som tælleren skal nulstilles til
    • none deaktiver tælleren
    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-countertil 5 og my-other-countertil 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 articlenulstilles sectionmod standardværdien (0), som derefter øges ved hver sektionsforekomst og derefter vises foran sektionens overskrifter.

    Tjek denne pen!

    Mere information

    • counter-reset i spec
    • counter-reset ved MDN

    Browsersupport

    Chrome Safari Firefox Opera IE Android iOS
    2+ 3.1+ Nogen 9.2+ 8+ Nogen Nogen