HTML でネストされた順序付きリストに番号を付ける方法

HTML でネストされた順序付きリストに番号を付ける

HTML でネストされた順序付きリストに番号を付けるには、CSS と JavaScript を組み合わせて使用​​できます。このアプローチは、高度な CSS プロパティをサポートしていないブラウザを含む、最新のブラウザで一貫して機能します。

CSS アプローチ:

1. 次の list-style-type を設定します。 CSS を使用してメインの順序付きリストをなしにします:

ol {
  list-style-type: none;
}

2. counter-reset および counter-increment の CSS プロパティを使用して数値を生成します。たとえば、ネストの最初のレベルでは、「level1」という名前のカウンタをインクリメントする必要があります:

ol:before {
  content: counter(level1) ". ";
  counter-increment: level1;
}

3. ネストされた順序付きリストの場合、カウンタをリセットして新しいシーケンスを開始します:

ol li ol {
  list-style-type: none;
  counter-reset: level2;
}

4. 以前に増分された値を使用して、ネストされたリストの数値を生成しますcounter:

ol li ol li:before {
  content: counter(level1) "." counter(level2) " ";
  counter-increment: level2;
}

jQuery アプローチ (IE6/7 サポート):

1. ネストされたリスト要素を でラップします。スタイルを適用するには:

$('ol ol').each(function(i, ol) {
  ol = $(ol);
  ol.children('li').each(function(i, li) {
    li = $(li);
    li.prepend('<span>' + level2 + '</span>');
  });
});

2. のスタイルを設定します。要素を使用して、必要な番号付け形式を提供します。

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

これらの CSS と JavaScript テクニックを組み合わせることで、HTML でネストされた順序付きリストに効果的に番号を付けることができ、主要なブラウザ間で一貫した形式を保証できます。

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