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

Baseline 2023
Newly available

Since ⁨December 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

Falls die Zähler nicht vorhanden sind, erstellt die counter-set Eigenschaft einen neuen Zähler für jeden benannten Zähler in der Liste der durch Leerzeichen getrennten Zähler-Wert-Paare. Um jedoch einen neuen Zähler zu erstellen, wird empfohlen, die CSS-Eigenschaft counter-reset zu verwenden.

Falls ein benannter Zähler in der Liste keinen Wert aufweist, wird der Wert des Zählers auf 0 gesetzt.

Hinweis: Der Wert des Zählers kann mit der CSS-Eigenschaft counter-increment 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;

Die counter-set Eigenschaft wird wie folgt angegeben:

  • Ein <custom-ident>, der den Zähler benennt, gefolgt optional von einem <integer>. Sie können beliebig viele Zähler zurücksetzen, wobei jedes Name- oder Name-Zahl-Paar durch ein Leerzeichen getrennt ist.
  • Der Schlüsselwortwert none.

Werte

<custom-ident>

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

<integer>

Der Wert, auf den der Zähler bei jedem Vorkommen des Elements gesetzt wird. Standardmäßig 0, falls nicht angegeben. Wenn derzeit kein Zähler mit dem angegebenen Namen auf dem Element vorhanden ist, erstellt das Element einen neuen Zähler mit dem angegebenen Namen und einem Startwert von 0 (obwohl dieser Wert möglicherweise sofort auf einen anderen Wert gesetzt oder erhöht wird).

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

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

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

Browser-Kompatibilität

Siehe auch