Können CSS-Zähler nummerierte Listen mit Dezimalstellen erstellen?

Nummerierte Listen mit Dezimalstellen erstellen

Kann CSS verwendet werden, um nummerierte Listen mit Dezimalstellen zu erstellen, z. B. 1,1, 1,2 und 1,3? , statt nur 1, 2 und 3? Die Anwendung von list-style-type:decimal erzeugt nur die letztere Sequenz.

Lösung: Verwendung von Zählern

Um das gewünschte Ergebnis zu erzielen, können Zähler verwendet werden:

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

Dieses CSS-Stylesheet weist jedem verschachtelten Listenelement eine Zahl mit Dezimalpunkten zu. Zum Beispiel „1“, „1.1“, „1.1.1“ und so weiter.

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>

Das obige ist der detaillierte Inhalt vonKönnen CSS-Zähler nummerierte Listen mit Dezimalstellen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!