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.
Wenn die Zähler nicht existieren, erstellt die counter-set Eigenschaft einen neuen Zähler für jeden benannten Zähler in der Liste von durch Leerzeichen getrennten Zähler- und Wertpaaren. Um jedoch einen neuen Zähler zu erstellen, wird empfohlen, die counter-reset CSS-Eigenschaft zu verwenden.
Wenn in der Liste einem benannten Zähler ein Wert fehlt, wird der Wert des Zählers auf 0 gesetzt.
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) ": ";
}
Hinweis:
Der Zählerwert kann mithilfe der counter-increment CSS-Eigenschaft erhöht oder verringert werden.
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;
Die counter-set Eigenschaft wird entweder als eines der folgenden angegeben:
- Ein
<custom-ident>, der den Zähler benennt, gefolgt optional von einem<integer>. Sie können beliebig viele Zähler angeben, die zurückgesetzt werden sollen, wobei jedes Name- oder Name-Wert-Paar durch ein Leerzeichen getrennt ist. - Der Schlüsselwortwert
none.
Werte
<custom-ident>-
Der Name des zu setzenden Zählers.
<integer>-
Der Wert, auf den der Zähler bei jedem Auftreten des Elements gesetzt wird. Standardmäßig
0, wenn nicht angegeben. Wenn derzeit kein Zähler mit dem angegebenen Namen auf dem Element existiert, erstellt das Element einen neuen Zähler mit dem angegebenen Namen und einem Startwert von0(obwohl dieser Wert dann sofort auf einen anderen Wert gesetzt oder erhöht werden kann). none-
Es soll kein Zähler gesetzt werden. Dies kann verwendet werden, um eine weniger spezifische
counter-set-Regel zu ü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
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
| Specification |
|---|
| CSS Lists and Counters Module Level 3> # propdef-counter-set> |
Browser-Kompatibilität
Loading…
Siehe auch
- Verwendung von CSS Zählern
counter-incrementcounter-reset@counter-stylecounter()undcounters()FunktionencontentEigenschaft- CSS Listen und Zähler Modul
- CSS Zählerstile Modul