CSS カウンターは小数点を含む番号付きリストを作成できますか?

小数点付きの番号付きリストの作成

CSS を使用して、1.1、1.2、1.3 などの小数点付きの番号付きリストを生成できますか、1、2、3だけではなく？ list-style-type:decmal を適用すると、後者のシーケンスのみが生成されます。

解決策: カウンターの利用

望ましい結果を達成するには、カウンターを使用できます。

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

この CSS スタイル シートは、ネストされたリストの各項目に小数点付きの番号を割り当てます。たとえば、「1」、「1.1」、「1.1.1」などです。

例:

<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 カウンターは小数点を含む番号付きリストを作成できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。