counter()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die counter()
-Funktion in CSS gibt einen String zurück, der den aktuellen Wert des benannten Zählers darstellt, sofern ein solcher existiert.
Die counter()
-Funktion wird generell innerhalb von Pseudo-Elementen durch die content
-Eigenschaft verwendet, kann theoretisch aber überall dort genutzt werden, wo ein <string>
-Wert unterstützt wird.
Probieren Sie es aus
.double-list {
counter-reset: count -1;
}
.double-list li {
counter-increment: count 2;
}
.double-list li::marker {
content: counter(count, decimal) ") ";
}
<p>Best Dynamic Duos in Sports:</p>
<ol class="double-list">
<li>Simone Biles + Jonathan Owens</li>
<li>Serena Williams + Venus Williams</li>
<li>Aaron Judge + Giancarlo Stanton</li>
<li>LeBron James + Dwyane Wade</li>
<li>Xavi Hernandez + Andres Iniesta</li>
</ol>
Syntax
/* Basic usage */
counter(counter-name);
/* changing the counter display */
counter(counter-name, upper-roman)
Zähler haben von sich aus keine sichtbare Wirkung.
Die counter()
- und counters()
-Funktionen machen Zähler nützlich, indem sie benutzerdefinierte Strings (oder Bilder) zurückgeben.
Werte
Die counter()
-Funktion akzeptiert bis zu zwei Parameter. Der erste Parameter ist der <counter-name>
. Der optionale zweite Parameter ist der <counter-style>
.
<counter-name>
-
Ein
<custom-ident>
, der den Zähler identifiziert. Dies ist derselbe groß-/klein-schreibungssensitive Name, der mit den Eigenschaftswertencounter-reset
undcounter-increment
verwendet wird. Der Zählername darf nicht mit zwei Bindestrichen beginnen und kann nichtnone
,unset
,initial
oderinherit
sein. <counter-style>
-
Ein
<list-style-type>
-Name,<@counter-style>
-Name odersymbols()
-Funktion, wobei ein Zählerstil ein vordefinierternumeric
,alphabetic
odersymbolic
Zählerstil, ein komplexes Langform-Ostasiatisches oder Äthiopisches vordefiniertes Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wenn weggelassen, wird der Zählerstil standardmäßig aufdecimal
gesetzt.
Hinweis:
Um die Zählerwerte beim Verschachteln von Zählern zu verbinden, verwenden Sie die counters()
-Funktion, die einen zusätzlichen <string>
-Parameter bereitstellt.
Formale Syntax
<counter()> =
counter( <counter-name> , <counter-style>? )
<counter-style> =
<counter-style-name> |
<symbols()>
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
Beispiele
lower-roman im Vergleich zu lower-alpha
In diesem Beispiel zeigen wir einen Zähler mit den Listentypen lower-roman
und lower-alpha
an.
HTML
<ol>
<li></li>
<li></li>
<li></li>
</ol>
CSS
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::after {
content:
"[" counter(count, lower-roman) "] == ["
counter(count, lower-alpha) "]";
}
Ergebnis
Zähleranzeige mit drei Stilen
In diesem Beispiel verwenden wir die counter()
-Funktion dreimal.
HTML
<ol>
<li></li>
<li></li>
<li></li>
</ol>
CSS
Wir fügen die counter()
-Funktion mit drei verschiedenen Zählerstilen ein, einschließlich des Standardwerts decimal
. Wir haben dem Absatz eine Auffüllung hinzugefügt, um Platz für die lange ::marker
-String zu bieten.
ol {
counter-reset: listCounter;
padding-left: 5em;
}
li {
counter-increment: listCounter;
}
li::marker {
content:
"Item #" counter(listCounter) " is: ";
}
li::after {
content:
"[" counter(listCounter, decimal-leading-zero) "] == ["
counter(listCounter, upper-roman) "]";
}
Ergebnis
Spezifikationen
Specification |
---|
CSS Lists and Counters Module Level 3 # counter-functions |
CSS Counter Styles Level 3 # extending-css2 |
Browser-Kompatibilität
Siehe auch
- Verwendung von CSS-Zählern
counter-reset
counter-set
counter-increment
@counter-style
- CSS
counters()
Funktion - CSS-Listen und Zähler Modul
- CSS-Zählerstile Modul
- CSS-generierte Inhalte Modul