CSS は、1.1、1.2、1.3 のような番号を付けたネストされた順序付きリストをどのように作成できますか?

ネストされた番号付けの順序付きリスト

CSS は、デフォルトの 1、2 の代わりに 1.1、1.2、1.3 として表示される順序付きリスト項目を生成できますか? , 3 シーケンス?

を使用した解決策カウンター

この結果を達成するには、CSS カウンターの力を利用できます。

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

上記のスタイル シートは、各

の item と呼ばれるカウンターを初期化します。要素。
1. 要素はブロックとして表示されるように設定され、擬似要素 :before が各

2. に追加されます。カウンター値を表示し、その後にピリオドとスペースを入力します。 counter-increment プロパティは、
3. ごとにカウンタをインクリメントします。 element.

   例

   <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 を適用すると、次の HTML は必要に応じてネストされた番号付きのリスト項目をレンダリングします。

   • 1. li 要素
     2. 1.1。サブリ要素
     3. 1.2。サブリ要素
     4. 1.3。 sub li 要素
   • 2. li 要素
   • 3. li 要素
     4. 3.1 。サブリ要素
     5. 3.2.サブリ要素
     6. 3.3.サブリ要素

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