Vynulování počítadla - Triky CSS

counter-resetVlastnost umožňuje automatické číslování prvků. Jako objednaný seznam (

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

counter-resetVlastnost se používá k vynulování čítače CSS na danou hodnotu.

Je součástí modulu čítače CSS, který je součástí generovaného obsahu, automatického číslování a uvádí specifikaci CSS2.1, rozšířenou ve specifikaci CSS3 modulu generovaného a nahrazeného obsahu.

Syntax

counter-reset: ( ?)+ | none

Kde…

je název počitadla, který chcete resetovat
je hodnota, na kterou se vynuluje počítadlo
none deaktivovat počítadlo

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

Poznámka: Výchozí hodnota pro celé číslo je 0. Pokud za názvem čítače není nastaveno žádné celé číslo, bude resetováno na 0. Tak to funguje podle očekávání:

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

Můžete resetovat několik čítačů najednou pomocí seznamu oddělených mezerami, z nichž každý má svou specifickou hodnotu, pokud si přejete.

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

Tím se resetuje my-awesome-counterna 5 a my-other-counterna výchozí hodnotu: 0.

Můžete vidět tento seznam jako: counter1 value1 counter2 value2 counter3 value3… . Pokud je hodnota vynechána, je to 0.

Ukázka

V následující ukázce se articlevynuluje sectionpočítadlo na jeho výchozí hodnotu (0), která se poté zvýší při každém výskytu sekce a poté se zobrazí před nadpisy sekcí.