CSS-Zähler sind von CSS verwaltete „Variablen“, deren Werte durch CSS-Regeln erhöht werden können (um zu verfolgen, wie oft sie verwendet werden). Mit Zählern können Sie das Erscheinungsbild von Inhalten basierend auf ihrer Platzierung im Dokument anpassen.
CSS-Zähler sind wie „Variablen“. Die Variablenwerte können durch CSS-Regeln erhöht werden (die verfolgen, wie oft sie verwendet werden).
Um mit CSS-Zählern zu arbeiten, verwenden wir die folgenden Eigenschaften:
counter-reset
- Erstellt einen Zähler oder setzt ihn zurück
counter-increment
- Erhöht einen Zählerwert
content
- Fügt generierte Inhalte ein
counter()
or counters()
function- Fügt den Wert eines Zählers zu einem Element hinzu
Um einen CSS-Zähler verwenden zu können, muss dieser zunächst mit counter-reset
erstellt werden.
Das folgende Beispiel erstellt einen Zähler für die Seite (in der Textauswahl). Dann wird der Zählerwert für jedes <h2>-Element erhöht und „Abschnitt Wert des Zählers:“ hinzugefügt. an den Anfang jedes <h2>-Elements:
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Using CSS Counters</h1>
<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>
</body>
</html>
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 „<“ gezähltWert des Abschnittszählers.Wert des Unterabschnittszählers":
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) " ";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
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) " ";
}
</style>
</head>
<body>
<h1>HTML/CSS Tutorials</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>Bootstrap</h2>
<h2>W3.CSS</h2>
<h1>Scripting Tutorials</h1>
<h2>JavaScript</h2>
<h2>jQuery</h2>
<h2>React</h2>
<h1>Programming Tutorials</h1>
<h2>Python</h2>
<h2>Java</h2>
<h2>C++</h2>
</body>
</html>
Ein Zähler kann auch nützlich sein, um übersichtliche Listen neu zu erstellen Die Instanz eines Zählers wird automatisch in untergeordneten Elementen erstellt. Hier verwenden wir die counters()
Funktion zum Einfügen einer Zeichenfolge zwischen verschiedenen Verschachtelungsebenen Zähler:
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
ol {
counter-reset: section;
list-style-type: none;
}
li::before {
counter-increment: section;
content: counters(section,".") " ";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
<ol>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
Wird mit den Pseudoelementen ::before und ::after verwendet, um generierten Inhalt einzufügen
Erhöht einen oder mehrere Zählerwerte
Erstellt oder setzt einen oder mehrere Zähler zurück
Gibt den aktuellen Wert des benannten Zählers zurück