Bagaimanakah CSS Boleh Membuat Senarai Tertib Bersarang dengan Penomboran Seperti 1.1, 1.2, 1.3?

Senarai Tertib dengan Penomboran Bersarang

Bolehkah CSS menghasilkan item senarai tersusun yang muncul sebagai 1.1, 1.2, 1.3 dan bukannya 1, 2 lalai , 3 urutan?

Penyelesaian Menggunakan Kaunter

Untuk mencapai hasil ini, anda boleh memanfaatkan kuasa pembilang CSS:

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

Helaian gaya di atas memulakan pembilang yang dipanggil item untuk setiap

unsur.
1. elemen ditetapkan untuk dipaparkan sebagai blok, dan unsur pseudo :sebelum ditambahkan pada setiap
2. untuk memaparkan nilai pembilang diikuti dengan noktah dan ruang. Harta kenaikan balas menambah pembilang untuk setiap
3. elemen.

   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 yang digunakan, HTML ini akan memaparkan item senarai dengan penomboran bersarang seperti yang dikehendaki:

   • 1. elemen li
     2. 1.1. elemen sub li
     3. 1.2. elemen sub li
     4. 1.3. elemen sub li
   • 2. elemen li
   • 3. elemen li
     4. 3.1 . elemen sub li
     5. 3.2. elemen sub li
     6. 3.3. elemen sub li

   Atas ialah kandungan terperinci Bagaimanakah CSS Boleh Membuat Senarai Tertib Bersarang dengan Penomboran Seperti 1.1, 1.2, 1.3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!