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()
CSS Funktion gibt einen String zurück, der den aktuellen Wert des benannten Zählers repräsentiert, falls vorhanden.
Die counter()
-Funktion wird in der Regel innerhalb von Pseudoelementen durch die content
-Eigenschaft verwendet. Theoretisch kann sie jedoch überall eingesetzt werden, wo ein <string>
-Wert unterstützt wird.
Probieren Sie es aus
Syntax
/* Basic usage */
counter(counter-name);
/* changing the counter display */
counter(counter-name, upper-roman)
Zähler haben an sich keine sichtbare Wirkung. Die counter()
- und counters()
-Funktionen machen Zähler nützlich, indem sie Entwickler-definierte 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. Dabei handelt es sich um denselben case-sensitiven Namen, der mit den Eigenschaftswertencounter-reset
undcounter-increment
verwendet wird. Der Zählername darf nicht mit zwei Bindestrichen beginnen und darf nichtnone
,unset
,initial
, oderinherit
sein. <counter-style>
-
Ein
<list-style-type>
-Name,<@counter-style>
-Name odersymbols()
-Funktion, wobei ein Zählerstil-Name ein einfacher vordefinierternumeric
,alphabetic
odersymbolic
Zählerstil, ein komplexer Langhand Ostasiatischer oder Ethiopischer vordefinierter Zählerstil oder ein anderer vordefinierter Zählerstil ist. Wird dieser weggelassen, ist der Standard-Zählerstildecimal
.
Hinweis:
Um die Zählerwerte bei verschachtelten 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 Liststilen lower-roman
und lower-alpha
.
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
Anzeige eines Zählers mit drei Stilen
In diesem Beispiel verwenden wir die counter()
-Funktion dreimal.
HTML
<ol>
<li></li>
<li></li>
<li></li>
</ol>
CSS
Wir verwenden die counter()
-Funktion mit drei verschiedenen Zählerstilen, einschließlich des Standardwerts decimal. Wir haben dem Listenstil einen Abstand hinzugefügt, um Platz für die lange ::marker
-Zeichenkette zu schaffen.
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
counter() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
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-generierter Inhalt Modul