Wie kann ich mit CSS benutzerdefinierte nummerierte Listen (z. B. 1.1, 1.2, 1.3) erstellen?

Benutzerdefinierte Nummerierung in geordneten Listen mit CSS

Kann geordnete Listen so gestaltet werden, dass Zahlen als 1.1, 1.2, 1.3 statt nur 1 angezeigt werden , 2, 3?

Die Eigenschaft list-style-type bietet keine direkte Kontrolle darüber Unternummerierung. Es gibt jedoch eine clevere Lösung mit CSS-Zählern:

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

Dieser Ansatz setzt für jedes Listenelement einen Zähler, der mit jedem verschachtelten Element erhöht wird. Die Funktion counters(item, ".") formatiert den Zähler als Zahl mit einem Punkttrennzeichen.

Zur Veranschaulichung betrachten Sie dieses HTML-Markup:

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

Die Anwendung des CSS-Stils würde zur Folge haben in der folgenden Liste:

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

Diese Technik bietet eine flexible Möglichkeit, die Nummerierung geordneter Listen anzupassen und ermöglicht so komplexere und hierarchische Listen mit benutzerdefinierten Trennzeichen und Nummerierungsschemata.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS benutzerdefinierte nummerierte Listen (z. B. 1.1, 1.2, 1.3) erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!