Bagaimana untuk Mencipta Senarai Tertib Bernombor Perpuluhan dengan Kaunter CSS?

Senarai Susunan dengan Nombor Perpuluhan dan CSS

Dalam senarai tersusun, anda mungkin menghadapi keperluan untuk memaparkan nombor dalam format tertentu, seperti 1.1, 1.2, 1.3 , bukannya urutan lalai 1, 2, 3. Semasa menggunakan senarai-style-type:decimal only number list item secara berurutan, adalah mungkin untuk mencapai format penomboran yang diingini menggunakan pembilang CSS.

Penyelesaian: Menggunakan Pembilang

Pembilang membolehkan anda memanipulasi nilai berangka yang dipaparkan untuk item senarai. Berikut ialah kod CSS untuk mencipta sistem penomboran hierarki:

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

Contoh

Pertimbangkan struktur HTML berikut:

<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>

Menggunakan kod CSS di atas, output akan menjadi:

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

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Senarai Tertib Bernombor Perpuluhan dengan Kaunter CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!