Reset licznika - CSS-Tricks | Almanach CSS 2025

counter-resetWłaściwość pozwala na automatyczne numerowanie elementów. Jak uporządkowana lista (

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

counter-resetWłaściwość służy do zresetowania licznika CSS do danej wartości.

Jest częścią modułu licznika CSS, który jest częścią generowanej treści, automatycznej numeracji i zawiera specyfikację CSS2.1, rozszerzoną o specyfikację Generated and Replaced Content Module CSS3.

Składnia

counter-reset: ( ?)+ | none

Gdzie…

to nazwa licznika, który chcesz zresetować
jest wartością do zresetowania licznika
none wyłączyć licznik

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

Uwaga: domyślną wartością dla liczby całkowitej jest 0. Jeśli po nazwie licznika nie zostanie ustawiona żadna liczba całkowita, zostanie ona zresetowana do 0. Tak więc działa to zgodnie z oczekiwaniami:

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

Możesz zresetować kilka liczników jednocześnie za pomocą listy oddzielonej spacjami, każdy z określoną wartością, jeśli chcesz.

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

Spowoduje to zresetowanie my-awesome-counterdo 5 i my-other-counterdo wartości domyślnej: 0.

Można zobaczyć tę listę jako: counter1 value1 counter2 value2 counter3 value3… . Jeśli wartość zostanie pominięta, wynosi 0.

Próbny

W poniższym demo articleresetuje sectionlicznik do jego domyślnej wartości (0), która jest następnie zwiększana przy każdym wystąpieniu sekcji, a następnie wyświetlana przed nagłówkami sekcji.