CSS-Zähler


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen


Pizza

Hamburger

Hotdogs

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.


Automatische Nummerierung mit Zählern

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:

Beispiel

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>




Verschachtelungstheken

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":

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

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:

Beispiel

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>



CSS-Zählereigenschaften

content

Wird mit den Pseudoelementen ::before und ::after verwendet, um generierten Inhalt einzufügen

counter-increment

Erhöht einen oder mehrere Zählerwerte

counter-reset

Erstellt oder setzt einen oder mehrere Zähler zurück

counter()

Gibt den aktuellen Wert des benannten Zählers zurück