Bolehkah Kaunter CSS Mencipta Senarai Bernombor dengan Mata Perpuluhan?

Mencipta Senarai Bernombor dengan Titik Perpuluhan

Bolehkah CSS digunakan untuk menjana senarai bernombor dengan titik perpuluhan, seperti 1.1, 1.2 dan 1.3 , bukannya hanya 1, 2, dan 3? Menggunakan senarai-style-type:decimal hanya menghasilkan jujukan yang terakhir.

Penyelesaian: Menggunakan Kaunter

Untuk mencapai hasil yang diingini, pembilang boleh digunakan:

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

Helaian gaya CSS ini memberikan setiap item senarai bersarang nombor dengan titik perpuluhan. Contohnya, "1", "1.1", "1.1.1", dan seterusnya.

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>

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