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
/* 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 von0erstellen (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-setzu überschreiben.
Formale Definition
| Anfangswert | none |
|---|---|
| Anwendbar auf | alle Elemente |
| Vererbt | Nein |
| Berechneter Wert | wie angegeben |
| Animationstyp | by computed value type |
Formale Syntax
counter-set =
[ <counter-name> <integer>? ]+ |
none
<counter-name> =
<custom-ident>
<integer> =
<number-token>
Beispiele
>Benannte Zähler setzen
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
- Verwendung von CSS-Zählern
counter-incrementcounter-reset@counter-stylecounter()undcounters()FunktionencontentEigenschaft- CSS-Listen und Zähler Modul
- CSS-Zählerstile Modul