Neueste Web-Entwicklung Tutorials
 

CSS Zähler

❮ Zurück Nächstes Kapitel ❯

Mit CSS Zähler

CSS-Zähler sind wie "Variablen". Die Variablenwerte können durch CSS-Regeln erhöht werden (was verfolgen wird, wie oft sie verwendet werden).

Für die Arbeit mit CSS-Zähler werden wir die folgenden Eigenschaften verwenden:

  • counter-reset - Erstellt oder setzt einen Zähler
  • counter-increment - Erhöht einen Zählerwert
  • content - Einsätze generierte Inhalte
  • counter() oder counters() Funktion - Fügt den Wert eines Zählers auf ein Element

Um einen CSS - Zähler zu verwenden, muss zunächst mit erstellt werden counter-reset .

Im folgenden Beispiel wird ein Zähler für die Seite erstellt (im Körper Wähler), erhöht dann den Zählerwert für jedes <h2> Element und fügt hinzu "Section < value of the counter >:" zu Beginn jedes <h2> Element:

Beispiel

body {
    counter-reset: section;
}

h2::before {
    counter-increment: section;
    content: "Section " counter(section) ": ";
}
Versuch es selber "

Nesting Zähler

Im folgenden Beispiel wird ein Zähler für die Seite (Abschnitt) und einen Zähler für jeden <h1> Element (Ziffer). Der "section" Zähler wird für jeden gezählt werden <h1> mit dem Element "Section < value of the section counter >." , Und die "subsection" Zähler für jeweils gezählt <h2> mit dem Element "< value of the section counter >.< value of the subsection counter >" :

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

Ein Zähler kann auch nützlich sein, skizzierte Listen zu machen, weil eine neue Instanz eines Zählers automatisch in untergeordneten Elemente erstellt wird. Hier verwenden wir die counters() Funktion gibt eine Zeichenfolge zwischen den verschiedenen Ebenen von verschachtelten Zähler einzufügen:

Beispiel

ol {
    counter-reset: section;
    list-style-type: none;
}

li::before {
    counter-increment: section;
    content: counters(section,".") " ";
}
Versuch es selber "

CSS Zählereigenschaften

Eigentum Beschreibung
content Wird mit dem :: vor und :: after Pseudo-Elemente, zum Einfügen von generierten Inhalten
counter-increment Inkrementiert einen oder mehrere Zählerwerte
counter-reset Erstellt oder setzt einen oder mehrere Zähler

❮ Zurück Nächstes Kapitel ❯