counters()
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 counters()
CSS Funktion ermöglicht das Kombinieren von Markierungen beim Verschachteln von Zählern. Die Funktion gibt einen String zurück, der die aktuellen Werte der benannten und verschachtelten Zähler, falls vorhanden, mit dem bereitgestellten String verbindet. Der dritte, optionale Parameter ermöglicht das Definieren des Listenstils.
Die counters()
-Funktion wird in der Regel innerhalb von Pseudo-Elementen durch die content
-Eigenschaft verwendet, kann theoretisch jedoch überall dort eingesetzt werden, wo ein <string>
-Wert unterstützt wird.
Die counters()
-Funktion hat zwei Formen: counters(<name>, <string>)
und counters(<name>, <string>, <style>)
. Der generierte Text ist der Wert aller Zähler mit dem angegebenen <name>
, geordnet von außen nach innen und getrennt durch den angegebenen <string>
. Die Zähler werden im angegebenen <style>
dargestellt, wobei standardmäßig decimal
verwendet wird, wenn kein <style>
angegeben ist.
Probieren Sie es aus
Syntax
/* Simple usage - style defaults to decimal */
counters(counter-name, '.');
/* changing the counter display */
counters(counter-name, '-', upper-roman)
Ein Zähler hat von sich aus keine sichtbare Wirkung. Die counters()
-Funktion (und die counter()
-Funktion) macht sie nützlich, indem sie entwicklerdefinierte Inhalte zurückgibt.
Werte
Die counters()
-Funktion akzeptiert zwei oder drei Parameter. Der erste Parameter ist der <counter-name>
. Der zweite Parameter ist der Verknüpfungs-<string>
. Der optionale dritte Parameter ist der <counter-style>
.
<counter-name>
-
Ein
<custom-ident>
, der die Zähler identifiziert, wobei derselbe groß- und kleinschreibungssensible Name verwendet wird wie bei den Eigenschaftencounter-reset
undcounter-increment
. Der Name darf nicht mit zwei Bindestrichen beginnen und darf nichtnone
,unset
,initial
oderinherit
sein. Alternativ kann für inline, einmal verwendbare Zähler diesymbols()
-Funktion anstelle eines benannten Zählers in Browsern, diesymbols()
unterstützen, verwendet werden. <string>
-
Beliebige Anzahl von Textzeichen. Nicht-lateinische Zeichen müssen mit ihren Unicode-Escape-Sequenzen codiert werden: beispielsweise stellt
\000A9
das Urheberrechtssymbol dar. <counter-style>
-
Ein Zählerstilname oder eine
symbols()
-Funktion. Der Zählerstilname kann ein einfacher vordefinierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplexer Langhandstil wie ostasiatisch oder äthiopisch, oder ein anderer vordefinierter Zählerstil. Wird er weggelassen, wird der Zählerstil standardmäßig auf decimal gesetzt.
Der Rückgabewert ist ein String, der alle Werte aller Zähler im CSS-Zählerset des Elements mit dem Namen <counter-name>
im Zählerstil, der durch <counter-style>
definiert ist (oder decimal, falls weggelassen), enthält. Der Rückgabestring ist von außen nach innen sortiert und wird durch den angegebenen <string>
verbunden.
Hinweis:
Für Informationen über nicht verknüpfte Zähler siehe die counter()
-Funktion, die den <string>
als Parameter weglässt.
Formale Syntax
<counters()> =
counters( <counter-name> , <string> , <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
Vergleich des Standard-Zählerwerts mit römischen Zahlen in Großbuchstaben
Dieses Beispiel enthält zwei counters()
-Funktionen: eine mit festgelegtem <counter-style>
und die andere, die auf decimal
standardmäßig zurückgreift.
HTML
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
CSS
ol {
counter-reset: listCounter;
}
li {
counter-increment: listCounter;
}
li::marker {
content:
counters(listCounter, ".", upper-roman) ") ";
}
li::before {
content:
counters(listCounter, ".") " == "
counters(listCounter, ".", lower-roman);
}
Ergebnis
Vergleich des Zählerwerts mit führender Null mit Kleinbuchstaben
Dieses Beispiel umfasst drei counters()
-Funktionen, jede mit verschiedenen <string>
- und <counter-style>
-Werten.
HTML
<ol>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
<li></li>
<li></li>
<li>
<ol>
<li></li>
<li>
<ol>
<li></li>
<li></li>
<li></li>
</ol>
</li>
</ol>
</li>
</ol>
CSS
ol {
counter-reset: count;
}
li {
counter-increment: count;
}
li::marker {
content:
counters(count, "-", decimal-leading-zero) ") ";
}
li::before {
content:
counters(count, "~", upper-alpha) " == "
counters(count, "*", lower-alpha);
}
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 | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
counters() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
- Verwendung von CSS Zählern
counter-set
Eigenschaftcounter-reset
Eigenschaftcounter-increment
Eigenschaft@counter-style
At-Regel- CSS
counter()
Funktion ::marker
Pseudo-Element- CSS Listen und Zähler Modul
- CSS Zählerstile Modul
- CSS generierte Inhalte Modul