Wie erstelle ich dezimal nummerierte geordnete Listen mit CSS-Zählern?

Listen mit Dezimalzahlen und CSS anordnen

In einer geordneten Liste müssen Sie möglicherweise Zahlen in einem bestimmten Format anzeigen, z. B. 1.1, 1.2, 1.3 , anstelle der Standardreihenfolge von 1, 2, 3. Während list-style-type:decimal nur Zahlen verwendet, um Elemente der Reihe nach aufzulisten, ist dies möglich das gewünschte Nummerierungsformat mithilfe von CSS-Zählern.

Lösung: Verwendung von Zählern

Mit Zählern können Sie den für Listenelemente angezeigten numerischen Wert manipulieren. Hier ist der CSS-Code zum Erstellen eines hierarchischen Nummerierungssystems:

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: item }

Beispiel

Betrachten Sie die folgende HTML-Struktur:

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

Anwenden des obigen CSS-Codes, die Ausgabe wird sein:

1. li element
   1.1 sub li element
   1.2 sub li element
   1.3 sub li element
2. li element
3. li element
   3.1 sub li element
   3.2 sub li element
   3.3 sub li element

Das obige ist der detaillierte Inhalt vonWie erstelle ich dezimal nummerierte geordnete Listen mit CSS-Zählern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!