Wie können CSS-Zähler eine Dezimalnummerierung in verschachtelten geordneten Listen erstellen?

Mit CSS verschachtelte geordnete Listen mit Dezimalnummerierung erstellen

Geordnete Listen zeigen normalerweise Zahlen wie 1, 2, 3 nacheinander an. Wie kann CSS jedoch verwendet werden, um spezifischere Nummerierungen wie 1.1, 1.2, 1.3 usw. zu erzeugen?

Die alleinige Verwendung von list-style-type:decimal liefert nur grundlegende numerische Werte. Um die gewünschte hierarchische Nummerierung zu erstellen, können Zähler eingesetzt werden.

Der folgende Codeausschnitt demonstriert die Verwendung von Zählern:

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

Hier ein Beispiel:

<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>

Wenn dieses CSS angewendet wird, zeigt die resultierende geordnete Liste Zahlen wie 1.1, 1.1.1, 1.2, 1.3 und an usw., die die verschachtelte Hierarchie von Listenelementen darstellen.

Das obige ist der detaillierte Inhalt vonWie können CSS-Zähler eine Dezimalnummerierung in verschachtelten geordneten Listen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!