Bagaimanakah Saya Boleh Mencipta Senarai Bernombor Tersuai (cth., 1.1, 1.2, 1.3) dengan CSS?

Penomboran Tersuai dalam Senarai Tertib dengan CSS

Bolehkah senarai tersusun digayakan untuk memaparkan nombor sebagai 1.1, 1.2, 1.3, bukannya hanya 1 , 2, 3?

Hartanah jenis gaya senarai tidak menawarkan langsung kawalan ke atas sub-nombor. Walau bagaimanapun, terdapat penyelesaian bijak menggunakan pembilang CSS:

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

Pendekatan ini menetapkan pembilang untuk setiap item senarai, yang ditambah dengan setiap item bersarang. Fungsi pembilang(item, ".") memformatkan pembilang sebagai nombor dengan pemisah titik.

Untuk menggambarkan, pertimbangkan penanda HTML ini:

<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 gaya CSS akan menghasilkan dalam senarai berikut:

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

Teknik ini menyediakan cara yang fleksibel untuk menyesuaikan penomboran senarai tertib, membolehkan senarai yang lebih kompleks dan hierarki dengan pemisah tersuai dan skema penomboran.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Senarai Bernombor Tersuai (cth., 1.1, 1.2, 1.3) dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!