Wie nummeriere ich verschachtelte geordnete Listen 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;
}

2. 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;
}

3. 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;
}

4. 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;
}

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>');
  });
});

2. Stylen Sie den Elemente, um das gewünschte Nummerierungsformat bereitzustellen:

ol li span {
  margin: 0 5px 0 -25px;
}

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!