Wie nummeriere ich verschachtelte geordnete Listen in HTML der Reihe nach?

So nummerieren Sie verschachtelte geordnete Listen in HTML

In HTML werden verschachtelte geordnete Listen normalerweise mit verschachtelter Nummerierung angezeigt. Standardmäßig beginnt jede verschachtelte Ebene wieder bei 1. Es kann jedoch wünschenswert sein, verschachtelte Elemente fortlaufend zu nummerieren.

CSS-Ansatz (Funktioniert in modernen Browsern)

Um eine fortlaufende Nummerierung zu erreichen, können Sie die CSS-Funktionen „list-style-type“ und „counter“ verwenden. Inkrementierungseigenschaften:

html>/**/body ol {
  list-style-type: none;
  counter-reset: level1;
}
ol li:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}
ol li ol {
  list-style-type: none;
  counter-reset: level2;
}
ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

Diese Methode interpretiert den Inhalt von OL-Tags als einfache Listen und ermöglicht so eine fortlaufende Nummerierung. Im Browser wird die verschachtelte geordnete Liste wie folgt angezeigt:

<ol>
  <li>first</li>
  <li>
    second
    <ol>
      <li>2.1. second nested first element</li>
      <li>2.2. second nested second element</li>
      <li>2.3. second nested third element</li>
    </ol>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

jQuery-Ansatz (IE6/7-Kompatibilität)

Für Browser, die den CSS-Ansatz nicht unterstützen (IE6/7 ), können Sie jQuery verwenden, um die gewünschte Nummerierung hinzuzufügen:

<script>
  $(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') {
      $('ol ol').each(function(i, ol) {
        ol = $(ol);
        var level1 = ol.closest('li').index() + 1;
        ol.children('li').each(function(i, li) {
          li = $(li);
          var level2 = level1 + '.' + (li.index() + 1);
          li.prepend('<span>' + level2 + '</span>');
        });
      });
    }
  });
</script>

Dieser JavaScript-Code zielt auf nicht unterstützte Browser ab und ändert die ungeordneten Listenstruktur, um die gewünschte Nummerierung zu erreichen. In diesen Browsern wird die verschachtelte geordnete Liste wie folgt angezeigt:

<ol>
  <li>first</li>
  <li>
    <p>second</p>
    <p>2.1. second nested first element</p>
    <p>2.2. second nested second element</p>
    <p>2.3. second nested third element</p>
  </li>
  <li>third</li>
  <li>fourth</li>
</ol>

Durch die Kombination beider Ansätze können Sie sicherstellen, dass verschachtelte geordnete Listen in allen gängigen Browsern fortlaufend nummeriert werden.

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