CSS カウンターは、ネストされた順序付きリストで 10 進数の番号付けをどのように作成できますか?

CSS を使用して 10 進数のネストされた順序付きリストを作成する

順序付きリストには通常、1、2、3 のような数字が順番に表示されます。しかし、CSS を使用して、1.1、1.2、1.3 などのより具体的な番号付けを生成するにはどうすればよいでしょうか?

list-style-type:decmal を単独で使用すると、基本的な数値のみが生成されます。必要な階層番号付けを作成するには、カウンターを使用できます。

次のコード スニペットは、カウンターの使用方法を示しています。

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

例を示します。

<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.1、1.1.1、1.2、1.3、などの数字が表示されます。など、リスト要素のネストされた階層を表します。

以上がCSS カウンターは、ネストされた順序付きリストで 10 進数の番号付けをどのように作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。