CSS counter-set Eigenschaft

Definition und Verwendung

counter-set Das Attribut wird verwendet, um einen CSS-Zähler zu erstellen und auf einen bestimmten Wert zu setzen.

counter-set Eigenschaften werden normalerweise zusammen mit dem counter-increment- und content-Attribut verwendet.

Beispiel

Beispiel 1

Erstellen Sie einen Zähler ("my-counter"), stellen Sie ihn auf 5 und erhöhen Sie ihn um 1 bei jedem Auftreten des <h2>-Selektors:

body {
  /* "my-counter" auf 5 setzen */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" um 1 erhöhen */
  counter-increment: my-counter;
  content: "Abschnitt " counter(my-counter) ". ";
}

Versuchen Sie es selbst

Beispiel 2

Erstellen Sie einen Zähler ("my-counter"), stellen Sie ihn auf 5 und verringern Sie ihn um 1 bei jedem Auftreten des <h2>-Selektors:

body {
  /* "my-counter" auf 5 setzen */
  counter-set: my-counter 5;
}
h2::before {
  /* "my-counter" um 1 verringern */
  counter-increment: my-counter -1;
  content: "Abschnitt " counter(my-counter) ". ";
}

Versuchen Sie es selbst

Beispiel 3

Verwenden Sie Formate wie "Abschnitt 10:"、"10.1"、"10.2" für die Nummerierung von Kapiteln und Unterabschnitten:

body {
  /* "Abschnitt" auf 9 setzen */
  counter-set: Abschnitt 9;
}
h1 {
  /* "subsection" auf 0 setzen */
  counter-set: subsection 0;
}
h1::before {
  /* "section" um 1 erhöhen */
  counter-increment: section;
  content: "Section " counter(section) ": ";
}
h2::before {
  /* "subsection" um 1 erhöhen */
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

Versuchen Sie es selbst

Beispiel 4

Erstellen Sie einen Zähler, stellen Sie ihn auf 9 und erhöhen Sie ihn um 1 bei jedem Auftreten des <h2>-Selektors (verwendet lateinische Zahlen):

body {
  /* "my-counter" auf 9 setzen */
  counter-set: my-counter 9;
}
h2::before {
  /* "my-counter" um 1 erhöhen */
  counter-increment: my-counter;
  content: counter(my-counter, upper-roman) ". ";
}

Versuchen Sie es selbst

CSS-Syntax

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

Eigenschaftswert

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Verwandte Seiten

Bezugnahme:::before Pseudo-Element

Bezugnahme:::after Pseudo-Element

Bezugnahme:CSS content Eigenschaft

Bezugnahme:CSS counter-increment Eigenschaft

Bezugnahme:CSS counter() Funktion