Heim > Web-Frontend > CSS-Tutorial > Wie nummeriere ich verschachtelte geordnete Listen in HTML?

Wie nummeriere ich verschachtelte geordnete Listen in HTML?

Susan Sarandon
Freigeben: 2024-11-15 08:36:02
Original
1044 Leute haben es durchsucht

How to Number Nested Ordered Lists in HTML?

Nummerierung verschachtelter geordneter Listen in HTML

Um verschachtelte geordnete Listen in HTML zu nummerieren, kann eine Kombination aus CSS und JavaScript verwendet werden. Dieser Ansatz funktioniert konsistent in modernen Browsern, auch in solchen, die keine erweiterten CSS-Eigenschaften unterstützen.

CSS-Ansatz:

  1. Legen Sie den Listenstiltyp fest Verwenden Sie CSS, um die geordnete Hauptliste in „Keine“ umzuwandeln:
ol {
  list-style-type: none;
}
Nach dem Login kopieren
  1. Verwenden Sie die CSS-Eigenschaften „Zähler zurücksetzen“ und „Zähler erhöhen“, um die Zahlen zu generieren. Beispielsweise sollte die erste Verschachtelungsebene einen Zähler mit dem Namen „Ebene1“ erhöhen:
ol:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}
Nach dem Login kopieren
  1. Bei verschachtelten geordneten Listen setzen Sie den Zähler zurück, um eine neue Sequenz zu starten:
ol li ol {
  list-style-type: none;
  counter-reset: level2;
}
Nach dem Login kopieren
  1. Generieren Sie die Zahlen für die verschachtelte Liste mithilfe des zuvor inkrementierten Zählers:
ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}
Nach dem Login kopieren

jQuery-Ansatz (IE6/7-Unterstützung):

  1. Verschachtelte Listenelemente mit einem umschließen So wenden Sie das Styling an:
$('ol ol').each(function(i, ol) {
  ol = $(ol);
  ol.children('li').each(function(i, li) {
    li = $(li);
    li.prepend('<span>' + level2 + '</span>');
  });
});
Nach dem Login kopieren
  1. Stylen Sie den Elemente, um das gewünschte Nummerierungsformat bereitzustellen:
ol li span {
  margin: 0 5px 0 -25px;
}
Nach dem Login kopieren

Durch die Kombination dieser CSS- und JavaScript-Techniken können Sie verschachtelte geordnete Listen in HTML effektiv nummerieren und so eine konsistente Formatierung in allen gängigen Browsern sicherstellen.

Das obige ist der detaillierte Inhalt vonWie nummeriere ich verschachtelte geordnete Listen in HTML?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage