Zähler zurücksetzen - CSS-Tricks

Die counter-resetEigenschaft ermöglicht die automatische Nummerierung von Elementen. Wie eine geordnete Liste (

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

Die counter-resetEigenschaft wird verwendet, um einen CSS-Zähler auf einen bestimmten Wert zurückzusetzen.

Es ist Teil des CSS-Zählermoduls, das Teil des generierten Inhalts, der automatischen Nummerierung und der CSS2.1-Spezifikation ist, die in der CSS3-Spezifikation des Moduls für generierte und ersetzte Inhalte erweitert wurde.

Syntax

counter-reset: ( ?)+ | none

Wo…

ist der Name des Zählers, den Sie zurücksetzen möchten
ist der Wert, auf den der Zähler zurückgesetzt werden soll
none Deaktivieren Sie den Zähler

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

Hinweis: Der Standardwert für die Ganzzahl ist 0. Wenn nach dem Zählernamen keine Ganzzahl gesetzt ist, wird diese auf 0 zurückgesetzt. Dies funktioniert also wie erwartet:

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

Sie können mehrere Zähler gleichzeitig mit einer durch Leerzeichen getrennten Liste zurücksetzen, von denen jeder seinen spezifischen Wert hat, wenn Sie dies wünschen.

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

Dies wird my-awesome-counterauf 5 und my-other-counterauf den Standardwert 0 zurückgesetzt.

Sie können diese Liste sehen als : counter1 value1 counter2 value2 counter3 value3… . Wenn ein Wert weggelassen wird, ist er 0.

Demo

In der folgenden Demo, articlesetzen sectionZähler auf seinen Standardwert (0), der dann bei jedem Abschnitt Auftreten inkrementiert wird, dann vor Abschnittsüberschriften angezeigt.