Diecounter-reset-Eigenschaft vonCSS erstellt benannteCSS-Zähler und initialisiert sie auf einen bestimmten Wert. Sie unterstützt das Erstellen von Zählern, die von eins bis zur Anzahl der Elemente hochzählen, sowie von denen, die von der Anzahl der Elemente bis eins herunterzählen.

Probieren Sie es aus

counter-reset: none;

counter-reset: chapter-count 0;

counter-reset: chapter-count;

counter-reset: chapter-count 5;

counter-reset: chapter-count -5;

<section>  <div>    <h1>Alice's Adventures in Wonderland</h1>    <h2>Down the Rabbit-Hole</h2>    <h2>The Pool of Tears</h2>    <h2>A Caucus-Race and a Long Tale</h2>    <h2>The Rabbit Sends in a Little Bill</h2>  </div></section>

#default-example {  text-align: left;  counter-reset: chapter-count;}#example-element {  background-color: lightblue;  color: black;}h2 {  counter-increment: chapter-count;  font-size: 1em;}h2::before {  content: "Chapter " counters(chapter-count, ".") ": ";}

Syntax

/* Create a counter with initial default value 0 */counter-reset: my-counter;/* Create a counter and initialize as "-3" */counter-reset: my-counter -3;/* Create a reversed counter with initial default value */counter-reset: reversed(my-counter);/* Create a reversed counter and initialize as "-1" */counter-reset: reversed(my-counter) -1;/* Create reversed and regular counters at the same time */counter-reset: reversed(pages) 10 items 1 reversed(sections) 4;/* Remove all counter-reset declarations in less specific rules */counter-reset: none;/* Global values */counter-reset: inherit;counter-reset: initial;counter-reset: revert;counter-reset: revert-layer;counter-reset: unset;

Werte

Diecounter-reset-Eigenschaft akzeptiert eine Liste von einem oder mehreren durch Leerzeichen getrennten Zählernamen oder das Schlüsselwortnone. Für Zählernamen verwenden reguläre Zähler das Format<counter-name>, während umgekehrte Zählerreversed(<counter-name>) verwenden, wobei<counter-name> entweder ein<custom-ident> oderlist-item für den integrierten<ol>-Zähler ist. Optional kann jedem Zählernamen ein<integer> folgen, um seinen Anfangswert festzulegen.

<custom-ident>

Gibt den Namen des Zählers an, der erstellt und initialisiert werden soll, unter Verwendung des Formats<custom-ident>. Diereversed()-Notierung kann verwendet werden, um den Zähler als umgekehrt zu kennzeichnen.

<integer>

Der Anfangswert, der auf den neu erstellten Zähler gesetzt werden soll.Standardmäßig0, wenn nicht angegeben.

none

Gibt an, dass keine Zählerinitialisierung erfolgen soll.Dieser Wert ist nützlich, umcounter-reset-Werte in weniger spezifischen Regeln zu überschreiben.

Beschreibung

Diecounter-reset-Eigenschaft kann sowohl reguläre als auch, in Browsern, die sie unterstützen, umgekehrte Zähler erstellen. Sie können mehrere reguläre und umgekehrte Zähler erstellen, die jeweils durch ein Leerzeichen getrennt sind. Zähler können ein eigenständiger Name oder ein durch ein Leerzeichen getrenntes Namens-Wert-Paar sein.

Das Setzen voncounter-increment: none auf einem Selektor mit höherer Spezifität überschreibt die Erstellung des benannten Zählers, der auf Selektoren mit niedrigerer Spezifität gesetzt wurde.

Standardanfangswerte

Die Standardanfangswerte von sowohl regulären als auch umgekehrten Zählern ermöglichen die Implementierung der beiden häufigsten Nummerierungsmuster: Hochzählen von eins bis zur Anzahl der Elemente und Herunterzählen von der Anzahl der Elemente bis eins. Durch das Hinzufügen eines Zählwerts zu einem benannten Zähler kann Ihr Zähler aufwärts oder abwärts zählen, beginnend bei einem ganzen Zahlenwert.

Reguläre Zähler werden, wenn kein Rücksetzungswert angegeben ist, standardmäßig auf0 gesetzt. Standardmäßig erhöhen sich reguläre Zähler um eins, was mit der Eigenschaftcounter-increment angepasst werden kann.

h1 {  /* Create the counters "chapter" and "page" and set to initial default value.     Create the counter "section" and set to "4". */  counter-reset: chapter section 4 page;}

Umgekehrte Zähler

Beim Erstellen von umgekehrten Zählern ohne einen Wert beginnt der Zähler mit dem Wert, der der Anzahl der Elemente im Set entspricht, und zählt herunter, sodass das letzte Element im Set1 ist. Standardmäßig verringern sich Rückwärtszähler um eins; dies kann ebenfalls mit der Eigenschaftcounter-increment geändert werden.

h1 {  /* Create reversed counters "chapter" and "section".      Set "chapter" as the number of elements and "section" as "10".      Create the counter "pages" with the initial default value. */  counter-reset: reversed(chapter) reversed(section) 10 pages;}

Eingebauterlist-item Zähler

Geordnete Listen (<ol>) haben eingebautelist-item Zähler, die ihre Nummerierung steuern. Diese Zähler erhöhen oder verringern sich automatisch um eins bei jedem Listenelement. Diecounter-reset-Eigenschaft kann verwendet werden, um dielist-item Zähler zurückzusetzen. Wie bei anderen Zählern können Sie den Standardinkrementwert fürlist-item Zähler überschreiben, indem Sie die Eigenschaftcounter-increment verwenden.

Formale Definition

Formale Syntax

counter-reset =
[<counter-name><integer>?|<reversed-counter-name><integer>?]+|
none

<counter-name> =
<custom-ident>

<integer> =
<number-token>

<reversed-counter-name> =
reversed(<counter-name>)

Beispiele

Überschreiben deslist-item Zählers

In diesem Beispiel wird diecounter-reset-Eigenschaft verwendet, um einen Startwert für einen implizitenlist-item Zähler festzulegen.

HTML

<ol>  <li>First</li>  <li>Second</li>  <li>Third</li>  <li>Fourth</li>  <li>Fifth</li></ol>

CSS

Mitcounter-reset setzen wir den implizitenlist-item Zähler, um mit einem anderen Wert als dem Standardwert1 zu starten:

ol {  counter-reset: list-item 3;}

Ergebnis

Mitcounter-reset setzen wir den implizitenlist-item Zähler, um bei jedemol ab3 zu zählen. Dann würde das erste Element mit 4 nummeriert werden, das zweite mit 5 usw., ähnlich dem Effekt, den das Schreiben von<ol start="4"> in HTML hätte.

Verwendung eines umgekehrten Zählers

Im folgenden Beispiel haben wir einen umgekehrten Zähler namens 'priority' deklariert. Der Zähler wird verwendet, um fünf Aufgaben zu nummerieren.

<ul>  <li>Task A</li>  <li>Task B</li>  <li>Task C</li>  <li>Task D</li>  <li>Task E</li></ul>

@supports not (counter-reset: reversed(priority)) {  .stack {    display: none;  }  body::after {    content: "Your browser doesn't support the reversed counters yet.";  }}

li::before {  content: counter(priority) ". ";  counter-increment: priority -1;}.stack {  counter-reset: reversed(priority);  list-style: none;}

Im Ausgabeergebnis sind die Elemente in umgekehrter Reihenfolge von 5 bis 1 nummeriert. Beachten Sie, dass im Code der Anfangswert des Zählers nicht angegeben wurde. Der Browser berechnet den Anfangswert automatisch zur Layout-Zeit unter Verwendung des Inkrementwertes des Zählers.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Verwendung von CSS-Zählern Leitfaden
• counter-increment Eigenschaft
• counter-set Eigenschaft
• @counter-style At-Regel
• Funktionencounter() undcounters()
• content Eigenschaft
• ::marker Pseudo-Klasse
• CSS-Listen und Zähler Modul
• CSS-Zählerstile Modul