CSS-Eigenschaft counter-reset

Die Eigenschaft counter-reset Eigenschaft setzt einen oder mehrere CSS-Zähler auf einen bestimmten Wert zurück. Diese Eigenschaft wird in der Regel zusammen mit den Eigenschaften content und counter-increment verwendet. Die Eigenschaft counter-reset wird mit zwei Werten angegeben: none und id numbers. "None" ist der Standardwert dieser Eigenschaft. Negative Werte sind erlaubt.

Anfangswert none
Gilt für Alle Elemente
Geerbt Nein
Animierbar Nein
Version CSS2
DOM Syntax object.style.counterReset = "section" ;

Syntax

counter-reset: none | name number | initial | inherit;

Klicken Sie auf die Schaltfläche "Jetzt testen", um die Eigenschaft counter-reset einzustellen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</title>
    <style>
      h2::before {
      counter-increment: section;
      content: "Book " counter(section) ". ";
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf die Schaltfläche "Jetzt testen", um die Eigenschaft counter-reset einzustellen:</p>
    <button onclick="myFunction()">Jetzt testen</button>
    <h2>HTML Tutorials</h2>
    <h2>JavaScript Tutorials</h2>
    <h2>CSS Tutorials</h2>
    <script>
      function myFunction() {
        document.body.style.counterReset = "section";
      }
    </script>
  </body>
</html>

Werte

Wert Beschreibung
none Die Zähler werden nicht inkrementiert.
name number Name definiert den Namen des Zählers, der zurückgesetzt werden soll. Number definiert den Wert, auf den der Zähler bei jedem Auftreten des Elements zurückgesetzt werden soll. Standardwert ist 0, wenn nicht angegeben.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
2.0+ 12.0+ 1.0+ 3.1+ 9.2+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'counter-reset'?
Finden Sie das nützlich?