Wie kann ich eine geordnete HTML-Liste mit unteren Alphamarkierungen und rechten Klammern erstellen?

Geordnete Listen in HTML: Unteres Alpha mit rechten Klammern

Der standardmäßige geordnete Listentyp für „unteres Alpha“ verwendet einen Punkt „ ." als Listenmarkierung. Gibt es eine Möglichkeit, dies zu ändern, um stattdessen eine rechte Klammer zu verwenden, was zu einer Reihenfolge wie a)...b) usw. führt?

Lösung

CSS bietet eine Funktion namens Zähler, die die automatische Erstellung von Sequenzen wie Kapitelnummern ermöglicht. Durch die Anpassung dieses Konzepts können wir unsere gewünschte Liste mit niedrigeren Alphazahlen mit rechten Klammern erreichen.

Hier ist ein Codeausschnitt:

ol {
  counter-reset: list;
}
ol > li {
  list-style: none;
}
ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

Die Eigenschaft „counter-reset“ initialisiert einen Zähler mit dem Namen „ list“ für die geordnete Liste. „Listenstil: keine;“ Entfernt die nativen Listensymbole.

Der wichtigste Schritt ist der „li:before“-Selektor. Es fügt Inhalte vor jedem Listenelement ein:

• "counter(list, low-alpha)" zählt mit niederalphabetischen Zeichen (a), b) usw.).
• Durch Hinzufügen einer schließenden Klammer und eines Leerzeichens wird das gewünschte Format erstellt: a)

Die resultierende Liste wird wie folgt angezeigt: folgt:

`Benutzerdefinierter Listenstiltyp (v1):

1. Nummer 1

< ;li>Nummer 2

2. Nummer 3


3. Nummer 4


4. Nummer 5


5. Nummer 6

`

Das obige ist der detaillierte Inhalt vonWie kann ich eine geordnete HTML-Liste mit unteren Alphamarkierungen und rechten Klammern erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!