Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

counter-set CSS property

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.

Die counter-set CSS Eigenschaft legt CSS-Zähler auf dem Element auf die angegebenen Werte fest.

Wenn die Zähler nicht existieren, erstellt die counter-set-Eigenschaft für jeden benannten Zähler in der Liste von durch Leerzeichen getrennten Zähler- und Wertpaaren einen neuen Zähler. Um jedoch einen neuen Zähler zu erstellen, wird empfohlen, die counter-reset CSS-Eigenschaft zu verwenden.

Falls einem benannten Zähler in der Liste ein Wert fehlt, wird der Wert des Zählers auf 0 gesetzt.

Hinweis: Der Wert des Zählers kann mit der counter-increment CSS-Eigenschaft erhöht oder verringert werden.

Probieren Sie es aus

counter-set: none;
counter-set: chapter-count 0;
counter-set: chapter-count;
counter-set: chapter-count 5;
counter-set: chapter-count -5;
<section class="default-example" id="default-example">
  <div class="transition-all" id="chapters">
    <h1>Alice's Adventures in Wonderland</h1>
    <h2>Down the Rabbit-Hole</h2>
    <h2 id="example-element">The Pool of Tears</h2>
    <h2>A Caucus-Race and a Long Tale</h2>
    <h2>The Rabbit Sends in a Little Bill</h2>
  </div>
</section>
#default-example {
  text-align: left;
  counter-set: chapter-count;
}

#example-element {
  background-color: #37077c;
  color: white;
}

h2 {
  counter-increment: chapter-count;
  font-size: 1em;
}

h2::before {
  content: "Chapter " counter(chapter-count) ": ";
}

Syntax

css
/* Set "my-counter" to 0 */
counter-set: my-counter;

/* Set "my-counter" to -1 */
counter-set: my-counter -1;

/* Set "counter1" to 1, and "counter2" to 4 */
counter-set: counter1 1 counter2 4;

/* Cancel any counter that could have been set in less specific rules */
counter-set: none;

/* Global values */
counter-set: inherit;
counter-set: initial;
counter-set: revert;
counter-set: revert-layer;
counter-set: unset;

Werte

Diese Eigenschaft wird entweder als eine Liste von <custom-ident>-Werten, jeweils optional gefolgt von einem <integer>, oder dem Schlüsselwort none angegeben:

<custom-ident>

Der Name des Zählers, der gesetzt werden soll.

<integer>

Der Wert, auf den der Zähler bei jedem Auftreten des Elements gesetzt wird. Standardmäßig 0, falls nicht angegeben. Existiert aktuell kein Zähler mit dem angegebenen Namen auf dem Element, wird das Element einen neuen Zähler mit dem angegebenen Namen und einem Startwert von 0 erstellen (obwohl er diesen Wert dann möglicherweise sofort auf etwas anderes setzen oder erhöhen kann).

none

Es wird kein Zähler gesetzt. Dies kann verwendet werden, um ein in einer weniger spezifischen Regel definiertes counter-set zu überschreiben.

Formale Definition

Anfangswertnone
Anwendbar aufalle Elemente
VererbtNein
Berechneter Wertwie angegeben
Animationstypby computed value type

Formale Syntax

counter-set = 
[ <counter-name> <integer>? ]+ |
none

<counter-name> =
<custom-ident>

<integer> =
<number-token>

Beispiele

Benannte Zähler setzen

css
h1 {
  counter-set: chapter section 1 page;
  /* Sets the chapter and page counters to 0,
     and the section counter to 1 */
}

Spezifikationen

Spezifikation
CSS Lists and Counters Module Level 3
# propdef-counter-set

Browser-Kompatibilität

Siehe auch