入れ子になった順序付きリストのカウンターが HTML で機能しないのはなぜですか?

HTML 順序付きリストのカウンターが機能しない

カウンターとスコープを使用してネストされた順序付きリストを作成しようとすると、不正な番号付けが発生する可能性があります。この記事では、この問題を詳しく掘り下げ、原因を調査し、解決策を提供します。

根本原因

この問題は、リストをリセットする「CSS の正規化」設定から発生します。マージンとパディングをゼロにします。このデフォルト設定は、適切なカウンター機能に必要なスタイルと競合します。

解決策

これを解決するには、「CSS の正規化」オプションを無効にします。あるいは、メインのリスト要素内にサブリストを含めます。次の CSS および HTML コードは、この修正を示しています。

ol {
  counter-reset: item;
}
li {
  display: block;
}
li:before {
  content: counters(item, ".") " ";
  counter-increment: item;
}

<ol>
  <li>one</li>
  <li>two
    <ol>
      <li>two.one</li>
      <li>two.two</li>
      <li>two.three</li>
    </ol>
  </li>
  <li>three
    <ol>
      <li>three.one</li>
      <li>three.two
        <ol>
          <li>three.two.one</li>
          <li>three.two.two</li>
        </ol>
      </li>
    </ol>
  </li>
  <li>four</li>
</ol>

CSS リセットを無効にするか、HTML 構造を変更することにより、順序付きリストのカウンターが正しく機能し、予想される番号が表示されます。

以上が入れ子になった順序付きリストのカウンターが HTML で機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。