CSS を使用してカスタムの番号付きリスト (例: 1.1、1.2、1.3) を作成するにはどうすればよいですか?

CSS を使用した順序付きリストのカスタム番号付け

番号付きリストのスタイルを設定して、数値を 1 だけでなく 1.1、1.2、1.3 として表示できますか? , 2, 3?

list-style-type プロパティサブ番号付けを直接制御することはできません。ただし、CSS カウンターを使用する賢い解決策があります。

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

この方法では、リスト項目ごとにカウンターを設定し、ネストされた項目ごとにカウンターが増加します。 counters(item, ".") 関数は、カウンタをドット区切り記号を使用した数値としてフォーマットします。

説明するには、次の HTML マークアップを考えてみましょう。

<ol>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
  <li>li element</li>
  <li>li element
    <ol>
      <li>sub li element</li>
      <li>sub li element</li>
      <li>sub li element</li>
    </ol>
  </li>
</ol>

CSS スタイルを適用すると、次の結果が得られます。次のリストで:

1. li element
    1.1. sub li element
    1.2. sub li element
    1.3. sub li element
2. li element
3. li element
    3.1. sub li element
    3.2. sub li element
    3.3. sub li element

この手法は、順序付きリストの番号付けをカスタマイズする柔軟な方法を提供し、より複雑で複雑なリストの番号付けを可能にします。カスタム区切り文字と番号付けスキームを使用した階層リスト。

以上がCSS を使用してカスタムの番号付きリスト (例: 1.1、1.2、1.3) を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。