CSS
Zähler

Syntax

• Gegensatz: [<Gegenname> <Ganzzahl>? ] + | keiner

• counter-reset: [<countername> <integer>? ] + | keiner

• Counter-Inkrement: [<Counter-Name> <Ganzzahl>? ] + | keiner

• counter (<counter-name> [, <counter-style>]?)

• Zähler (<Counter-Name>, <Connector-String> [, <Counter-Style>]?)

Parameter

Bemerkungen

Anwenden von römischen Zahlen auf die Zählerausgabe

CSS

body {
  counter-reset: item-counter;
}

.item {
  counter-increment: item-counter;
}

.item:before {
  content: counter(item-counter, upper-roman) ". "; /* by specifying the upper-roman as style the output would be in roman numbers */
}

HTML

<div class='item'>Item No: 1</div>
<div class='item'>Item No: 2</div>
<div class='item'>Item No: 3</div>

Im obigen Beispiel würde die Ausgabe des Zählers als I, II, III (römische Zahlen) anstelle der üblichen 1, 2, 3 angezeigt, da der Entwickler den Stil des Zählers explizit angegeben hat.

Nummerieren Sie jeden Artikel mit dem CSS-Zähler

CSS

body {
  counter-reset: item-counter; /* create the counter */
}
.item {
  counter-increment: item-counter; /* increment the counter every time an element with class "item" is encountered */
}
.item-header:before {
  content: counter(item-counter) ". "; /* print the value of the counter before the header and append a "." to it */
}

/* just for demo */

.item {
  border: 1px solid;
  height: 100px;
  margin-bottom: 10px;
}
.item-header {
  border-bottom: 1px solid;
  height: 40px;
  line-height: 40px;
  padding: 5px;
}
.item-content {
  padding: 8px;
}

HTML

<div class='item'>
  <div class='item-header'>Item 1 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 2 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>
<div class='item'>
  <div class='item-header'>Item 3 Header</div>
  <div class='item-content'>Lorem Ipsum Dolor Sit Amet....</div>
</div>

Das obige Beispiel nummeriert jedes "Element" auf der Seite und fügt die Nummer des Elements vor seinem Header hinzu (unter Verwendung der content von .item-header Element :before Pseudo). Eine Live-Demo dieses Codes ist hier verfügbar.

Implementierung der mehrstufigen Nummerierung mithilfe von CSS-Zählern

CSS

ul {
  list-style: none;
  counter-reset: list-item-number; /* self nesting counter as name is same for all levels */
}
li {
  counter-increment: list-item-number;
}
li:before {
  content: counters(list-item-number, ".") " "; /* usage of counters() function means value of counters at all higher levels are combined before printing */
}

HTML

<ul>
  <li>Level 1
    <ul>
      <li>Level 1.1
        <ul>
          <li>Level 1.1.1</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 2
    <ul>
      <li>Level 2.1
        <ul>
          <li>Level 2.1.1</li>
          <li>Level 2.1.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Level 3</li>
</ul>

Das Obige ist ein Beispiel für die mehrstufige Nummerierung mit CSS-Zählern. Es nutzt das Selbstverschachtelungskonzept der Zähler. Selbstverschachtelung ist ein Konzept, bei dem ein Element, das bereits einen Zähler mit dem angegebenen Namen hat, einen anderen erstellen muss, es als untergeordnetes Element des vorhandenen Zählers erstellt. Hier erbt die zweite Ebene ul bereits den Zähler für die list-item-number von ihrem übergeordneten list-item-number , muss dann jedoch eine eigene list-item-number (für ihr untergeordnetes li ) erstellen und erstellt so die list-item-number[1] (Zähler für zweite Ebene) und verschachtelt es unter der list-item-number[0] (Zähler für die erste Ebene). Dadurch wird die mehrstufige Nummerierung erreicht.

Der Ausgang wird gedruckt unter Verwendung der counters() Funktion anstelle der counter() Funktion , da die counters() Funktion ausgelegt ist , den Wert aller höheren Ebene Zähler (parent) vorangestellt , wenn der Ausgangsdruck.