HTML で継続的にカウントしながら、ネストされた順序付きリストに番号を付ける方法

HTML 内のネストされた順序付きリストの数

ネストされた順序付きリストがあり、ネストされた要素の 2 番目のレベルを変更したいとします。 番号付け方法前のレイヤーから数値を継承してカウントを続けることができます。現在、第 2 レベルの要素は再び 1 からカウントを開始しますが、2.1、2.2、2.3 のように 10 進数で番号を付ける必要があります。

この問題は次の方法で解決できます:

CSS ソリューション (すべての最新ブラウザ)

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

この CSS はカウンター メカニズムを使用しており、数値を維持します。ネストレベルごとに。最新のすべてのブラウザで正常に動作します。

IE6/7 と互換性のある JQuery ソリューション

Internet Explorer 6/7 では、Pure CSS ソリューションは機能しません。したがって、フォールバック メカニズムが必要です:

<script>
  $(document).ready(function() {
    if ($('ol:first').css('list-style-type') != 'none') { // For IE6/7 only.
      $('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>

この jQuery コードは、Internet Explorer 6/7 ブラウザーに数値を追加します。ネストされた数値を含む要素の前にスパンを挿入します。

以上がHTML で継続的にカウントしながら、ネストされた順序付きリストに番号を付ける方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。