Bagaimanakah Pembilang CSS Boleh Membuat Penomboran Perpuluhan dalam Senarai Tertib Bersarang?

Menggunakan CSS untuk Mencipta Senarai Tertib Bersarang dengan Penomboran Perpuluhan

Senarai tertib biasanya memaparkan nombor seperti 1, 2, 3 secara berurutan. Walau bagaimanapun, bagaimanakah CSS boleh digunakan untuk menghasilkan penomboran yang lebih khusus seperti 1.1, 1.2, 1.3 dan seterusnya?

Menggunakan list-style-type:decimal sahaja hanya menghasilkan nilai angka asas. Untuk mencipta penomboran hierarki yang diingini, pembilang boleh digunakan.

Coretan kod berikut menunjukkan cara menggunakan pembilang:

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

Berikut ialah contoh:

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

Dengan CSS ini digunakan, senarai tertib yang terhasil akan memaparkan nombor seperti 1.1, 1.1.1, 1.2, 1.3 dan seterusnya, mewakili hierarki elemen senarai bersarang.

Atas ialah kandungan terperinci Bagaimanakah Pembilang CSS Boleh Membuat Penomboran Perpuluhan dalam Senarai Tertib Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!