CSS counter()-Funktion
Beispiel
Erstellen Sie einen Zähler auf der Seite (im body-Selektor), erhöhen Sie den Zählerwert für jedes <h3>-Element und fügen Sie den Text "Abschnittszählerwert" vor jedem <h3>-Element hinzu:
body {
counter-reset: section; /*Zähler auf 0 zurücksetzen*/
}
h3:before {
counter-increment: section; /*Zählerwert erhöhen*/
content: "Abschnitt " counter(section) ": "; /*Zähler anzeigen*/
}
Selbst ausprobieren »
Definition und Verwendung
Die Funktion counter() gibt den aktuellen Wert des Zählers als Zeichenkette zurück.
Der Wert des Zählers wird durch die Verwendung voncounter-resetundcounter-increment festgelegt.Vorgehen: Wenden Sie die Funktion counter() auf content an, um sie auf der Seite anzuzeigen.
Unterstützte Versionen: CSS3
Browser-Unterstützung
| Funktion | |||||
|---|---|---|---|---|---|
| counter() | Unterstützt | Unterstützt | Unterstützt | Unterstützt | Unterstützt |
CSS-Syntax
counter(countername, counterstyle)
| Wert | Beschreibung |
|---|---|
| countername | Erforderlich. Der Name des Zählers (derselbe Name, der mit den Eigenschaften counter-reset und counter-increment verwendet wird). |
| counterstyle | Optional. Der Stil des Zählers (kann CSSlist-style-typeEigenschaftswert sein). |
Weitere Beispiele
Beispiel
Zählerstile festlegen:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section, upper-roman) ": ";
}
Selbst ausprobieren »
Beispiel
Verschachtelte Zähler festlegen:
ol {
counter-reset: section; /*Erstellt für jedes ol-Element eine neue Zählerinstanz*/
list-style-type: none;
}
li:before {
counter-increment: section; /*Nur die aktuelle Instanz des Zählers inkrementieren.*/
content: counters(section, ".") " "; /*Fügt allen Zählerinstanzen einen durch '.' getrennten Wert hinzu*/
}
Selbst ausprobieren »
Weitere Erweiterungen