1. ホーム
  2. ハイパーリンク

[解決済み】順序付きリストは、cssで1.1, 1.2, 1.3のように見える結果を生成することができますか?

2022-04-03 15:31:50

質問

順序付きリストは、CSSで1.1, 1.2, 1.3 (単なる1, 2, 3, ...ではなく)のような結果を出すことができますか? 今のところ list-style-type:decimal は1,2,3だけを生成し、1.1,1.2.,1.3は生成していない。

解決方法は?

を使用することができます。 カウンタ を実行します。

次のスタイルシートは、ネストしたリスト項目に "1"、"1.1"、"1.1.1"などと番号を付けます。

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

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>

参照 ネストされたカウンタとスコープ をご覧ください。