CSS-Zähler

CSS-Zähler werden über eine Variable gesetzt, und die Variable wird gemäß den Regeln inkrementiert.

Verwenden von Zählern zur automatischen Nummerierung

CSS-Zähler inkrementieren eine Variable gemäß den Regeln.

CSS-Zähler verwenden die folgenden Eigenschaften:

  • counter-reset- Zähler erstellen oder zurücksetzen
  • counter-increment- Inkrementieren von Variablen
  • content- Generierten Inhalt einfügen
  • counter()odercounters()Funktion - fügt den Wert des Zählers zu einem Element hinzu

Um CSS-Zähler zu verwenden, müssen Sie sie zuerst mit counter-reset erstellen:

Das folgende Beispiel erstellt einen Zähler auf der Seite (im body-Selektor). Der Zählerwert jedes <h2>-Elements wird inkrementiert, und "Section <" wird vor jedem <h2>-Element hinzugefügt.Zählerwert>:"

CSS-Beispiele

body { counter-reset: section; } h2::before { counter-increment: section; content: "Section " counter(section) ": "; }

Selbst ausprobieren »

verschachtelte Zähler

Das folgende Beispiel erstellt einen Zähler auf der Seite und fügt den Zählerwert "Section <" vor jedem <h1>-Element hinzu.Zählerwert der Hauptüberschrift>.", der verschachtelte Zählerwert wird vor dem <h2>-Element platziert, mit dem Inhalt "<"Zählerwert der Hauptüberschrift>.<Zählerwert der Unterüberschrift>":

CSS-Beispiele

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) " "; }

Selbst ausprobieren »

Zähler können auch in Listen verwendet werden, wo untergeordnete Elemente der Liste automatisch erstellt werden. Hier verwenden wircounters()Funktion zum Einfügen von Zeichenketten auf verschiedenen Verschachtelungsebenen:

CSS-Beispiele

ol { counter-reset: section; list-style-type: none; } li::before { counter-increment: section; content: counters(section,".") " "; }

Selbst ausprobieren »

CSS-Zähler-Eigenschaften

Eigenschaft Beschreibung
content Verwenden Sie die Pseudoelemente ::before und ::after, um automatisch generierten Inhalt einzufügen
counter-increment Einen oder mehrere Werte inkrementieren
counter-reset Einen oder mehrere Zähler erstellen oder zurücksetzen
Weitere Erweiterungen