CSS カウンターを使用して 10 進数の順序付きリストを作成する方法

10 進数と CSS を使用した順序付きリスト

順序付きリストでは、1.1、1.2、1.3 などの特定の形式で数値を表示する必要がある場合があります。 、デフォルトのシーケンス 1、2、3 の代わりに。 list-style-type:decmal のみを使用すると、リスト項目に連続した番号が付けられます。 CSS カウンターを使用すると、必要な番号付け形式を実現できます。

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

カウンターを使用すると、リスト項目に表示される数値を操作できます。階層番号付けシステムを作成する CSS コードは次のとおりです。

OL { counter-reset: item }
LI { display: block }
LI:before { content: counters(item, ".") " "; counter-increment: 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 カウンターを使用して 10 進数の順序付きリストを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。