CSS -Zähler
Pizza
Hamburger
Hotdogs
CSS-Zähler sind „Variablen“, die von CSS verwaltet werden und deren Werte durch CSS-Regeln erhöht werden können (um zu verfolgen, wie oft sie verwendet werden). Mithilfe von Zählern können Sie das Erscheinungsbild von Inhalten basierend auf seiner Platzierung im Dokument anpassen.
Automatische Nummerierung mit Zählern
CSS-Zähler sind wie "Variablen". Die Variablenwerte können durch CSS-Regeln erhöht werden (die nachverfolgen, wie oft sie verwendet werden).
Um mit CSS-Zählern zu arbeiten, verwenden wir die folgenden Eigenschaften:
counter-reset
- Erstellt oder setzt einen Zähler zurückcounter-increment
- Erhöht einen Zählerwertcontent
- Fügt generierten Inhalt eincounter()
odercounters()
Funktion - Addiert den Wert eines Zählers zu einem Element
Um einen CSS-Zähler zu verwenden, muss dieser zunächst mit erstellt werden counter-reset
.
Das folgende Beispiel erstellt einen Zähler für die Seite (in der Textauswahl), erhöht dann den Zählerwert für jedes <h2>-Element und fügt „Abschnitt < Wert des Zählers >:“ am Anfang jedes <h2>-Elements hinzu:
Beispiel
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Zähler verschachteln
Das folgende Beispiel erstellt einen Zähler für die Seite (Abschnitt) und einen Zähler für jedes <h1>-Element (Unterabschnitt). Der „Abschnitt“-Zähler wird für jedes <h1>-Element mit „Abschnitt < Wert des Abschnittszählers >.“ gezählt, und der „Unterabschnitt“-Zähler wird für jedes <h2>-Element mit „< Wert des Abschnittszählers “ gezählt >.< Wert des Unterabschnittszählers >":
Beispiel
body {
counter-reset: section;
}
h1 {
counter-reset: subsection;
}
h1::before {
counter-increment:
section;
content: "Section " counter(section) ". ";
}
h2::before {
counter-increment: subsection;
content:
counter(section) "." counter(subsection) " ";
}
Ein Zähler kann auch nützlich sein, um Gliederungslisten zu erstellen, da in untergeordneten Elementen automatisch eine neue Instanz eines Zählers erstellt wird. Hier verwenden wir die
counters()
Funktion, um eine Zeichenfolge zwischen verschiedenen Ebenen von verschachtelten Zählern einzufügen:
Beispiel
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
CSS-Zählereigenschaften
Property | Description |
---|---|
content | Used with the ::before and ::after pseudo-elements, to insert generated content |
counter-increment | Increments one or more counter values |
counter-reset | Creates or resets one or more counters |
counter() | Returns the current value of the named counter |