counters()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 2015⁩.

Die counters() CSS Funktion ermöglicht das Kombinieren von Markern beim Verschachteln von Zählern. Die Funktion gibt einen String zurück, der die aktuellen Werte der benannten und verschachtelten Zähler, wenn vorhanden, mit dem bereitgestellten String verkettet. 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>, angeordnet vom äußersten bis zum innersten, und getrennt durch den angegebenen <string>. Die Zähler werden im angegebenen <style> dargestellt, standardmäßig im decimal, wenn kein <style> angegeben ist.

Probieren Sie es aus

ol {
  counter-reset: index;
  list-style-type: none;
}

li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) " ";
}

<ol>
  <li>Mars</li>
  <li>
    Saturn
    <ol>
      <li>Mimas</li>
      <li>Enceladus</li>
      <li>
        <ol>
          <li>Voyager</li>
          <li>Cassini</li>
        </ol>
      </li>
      <li>Tethys</li>
    </ol>
  </li>
  <li>
    Uranus
    <ol>
      <li>Titania</li>
    </ol>
  </li>
</ol>

Syntax

css

/* Basic usage  - style defaults to decimal */
counters(counter-name, '.');

/* changing the counter display */
counters(counter-name, '-', upper-roman)

Ein Counter hat für sich genommen keinen sichtbaren Effekt. Die counters()-Funktion (und die counter()-Funktion) macht sie nützlich, indem sie benutzerdefinierten Inhalt 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, und derselbe case-sensitiven Name, der für die counter-reset- und counter-increment-Eigenschaften verwendet wird. Der Name darf nicht mit zwei Bindestrichen beginnen und kann nicht none, unset, initial oder inherit sein. Alternativ, für Inline-Zähler zur einmaligen Verwendung, kann die symbols()-Funktion anstelle eines benannten Zählers in Browsern, die symbols() unterstützen, verwendet werden.
<string>: Eine beliebige Anzahl von Textzeichen. Nicht-lateinische Zeichen müssen mit ihren Unicode-Escape-Sequenzen kodiert werden: Zum Beispiel repräsentiert \000A9 das Copyright-Symbol.
<counter-style>: Ein Zählerstilname oder eine symbols()-Funktion. Der Zählerstilname kann ein vordefinierter Stil wie numerisch, alphabetisch oder symbolisch sein, ein komplexer langhand-vordefinierter Stil wie Ostasiatisch oder Äthiopisch oder ein anderer vordefinierter Zählerstil. Wenn er weggelassen wird, ist der Standard-Zählerstil decimal.

Der Rückgabewert ist ein String, der alle Werte aller Zähler im CSS-Zähler-Set des Elements mit dem Namen <counter-name> im durch <counter-style> definierten Zählerstil (oder decimal, wenn weggelassen) enthält. Der Rückgabestring ist in der Reihenfolge vom äußersten bis zum innersten geordnet und durch den angegebenen <string> verbunden.

Hinweis: Für Informationen über nicht verkettete 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>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Beispiele

Vergleich des Standard-Zählerwerts mit Großbuchstaben römischen Zahlen

Dieses Beispiel enthält zwei counters()-Funktionen: eine mit <counter-style> gesetzt und die andere, die auf decimal standardmäßig zurückgreift.

HTML

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

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 Dezimal-Zählerwerts mit führenden Nullen und Kleinbuchstaben

Dieses Beispiel enthält drei counters()-Funktionen, jede mit unterschiedlichen <string> und <counter-style> Werten.

HTML

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

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden