symbols

Der symbols CSS-Deskriptor der @counter-style-Regel wird verwendet, um die Symbole für die Erstellung von Zählerdarstellungen im angegebenen Zählersystem festzulegen. Das Festlegen dieses Deskriptors ist erforderlich, wenn der Wert des Deskriptors system cyclic, numeric, alphabetic, symbolic oder fixed ist.

Syntax

css
symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

Werte

Der Deskriptor symbols wird als eine Liste aus einem oder mehreren durch Leerzeichen getrennten <symbol>-Werten angegeben.

<symbol>

Gibt das Symbol an, das im Zählersystem verwendet werden soll. Jedes Symbol in der Liste kann entweder ein <string>, ein <image> oder ein <custom-ident> sein. Der <image>-Wert kann wiederum als <url> oder <gradient> angegeben werden.

Hinweis: Bei der Verwendung eines Identifiers für ein Symbol beachten Sie, dass ASCII-Nicht-Buchstaben wie *, ", und \ nicht als Identifier gelten. Sie müssen entweder als Zeichenkette in Anführungszeichen gesetzt oder maskiert werden.

Beschreibung

Ein Symbol kann eine Zeichenkette, ein Bild oder ein Identifier sein. Es wird innerhalb der @counter-style-Regel at-rule verwendet.

Wenn der Wert des Deskriptors system cyclic, numeric, alphabetic, symbolic oder fixed ist, muss der Deskriptor symbols angegeben werden. Für das additive-System verwenden Sie stattdessen den Deskriptor additive-symbols, um die Symbole anzugeben.

Während ein Leerzeichen zwischen zitierten Symbolen nicht erforderlich ist, verbessert es die Lesbarkeit von CSS. Um ein Anführungszeichen als Symbol zu verwenden, maskieren Sie entweder das Anführungszeichen oder schließen Sie das Zeichen in andere Anführungszeichen ein, z. B. "'".

Wenn Sie Symbole mit Identifiers anstelle von Zeichenketten definieren, beachten Sie die Syntaxregeln für Identifiers. Zum Beispiel, wie oben erwähnt, sind ASCII-Nicht-Buchstaben wie * keine Identifiers und müssen entweder zitiert oder maskiert werden. Hexadecimal maskierte Zeichen werden von einem Leerzeichen gefolgt. Dieses Leerzeichen könnte wie der Abstand wirken, der zwei Identifiers trennt, ermöglicht aber, dass Ziffern den hexadecimaleskapierten Zeichen folgen können. Das bedeutet, dass zwei Leerzeichen nach einem hexadecimaleskapierten Identifier eingeschlossen werden müssen, um ihn vom nächsten Identifier zu trennen. Es ist zum Beispiel besser, die Zeichenkette "\2A 1" anstelle von \2A 1 mit zwei Leerzeichen zu verwenden, da Ihre Codewerkzeuge doppelte Leerzeichen entfernen könnten. Es ist generell sicherer, Identifier, die maskiert werden müssen, zu zitieren oder Zeichenketten zu verwenden.

Formale Definition

Zugehörige @-Regel@counter-style
Anfangswertn/a (required)
Berechneter Wertwie angegeben

Formale Syntax

symbols = 
<symbol>+

<symbol> =
<string> |
<image> |
<custom-ident>

<image> =
<url> |
<gradient>

<url> =
<url()> |
<src()>

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

Beispiele

Festlegen von Zählersymbolen

In diesem Beispiel umfasst die Liste der Werte für den Deskriptor symbols Buchstaben (A, D, E), eine Zahl in Anführungszeichen ("1") und einen hexadecimaleskapierten Identifier in Anführungszeichen ("\24B7") für das Zeichen .

HTML

html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

css
@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Ergebnis

Spezifikationen

Specification
CSS Counter Styles Level 3
# counter-style-symbols

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
symbols

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support

Siehe auch