Wie kann CSS verschachtelte geordnete Listen mit Nummerierung wie 1.1, 1.2, 1.3 erstellen?

Geordnete Listen mit verschachtelter Nummerierung

Kann CSS geordnete Listenelemente erzeugen, die als 1.1, 1.2, 1.3 anstelle der Standardwerte 1, 2 angezeigt werden? , 3 Sequenz?

Lösung verwenden Zähler

Um dieses Ergebnis zu erzielen, können Sie die Leistungsfähigkeit von CSS-Zählern nutzen:

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

Das obige Stylesheet initialisiert einen Zähler namens „item“ für jedes

Element. Das
1. Elemente werden so eingestellt, dass sie als Blöcke angezeigt werden, und zu jedem
2. wird ein Pseudoelement :before hinzugefügt. um den Zählerwert anzuzeigen, gefolgt von einem Punkt und einem Leerzeichen. Die Eigenschaft „Zählerinkrement“ erhöht den Zähler für jede
3. Element.

   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>

   Nach dem Login kopieren

   Mit dem angewendeten CSS rendert dieser HTML-Code die Listenelemente mit verschachtelter Nummerierung wie gewünscht:

   • 1. li-Element
     2. 1.1. Sub-Li-Element
     3. 1.2. Sub-Li-Element
     4. 1.3. Sub-Li-Element
   • 2. Li-Element
   • 3. Li-Element
     4. 3.1 . Sub-Li-Element
     5. 3.2. Sub-Li-Element
     6. 3.3. Sub-Li-Element

   Das obige ist der detaillierte Inhalt vonWie kann CSS verschachtelte geordnete Listen mit Nummerierung wie 1.1, 1.2, 1.3 erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!