Bolehkah Kaunter CSS Menyesuaikan Senarai Tertib Alfa Rendah HTML untuk Menggunakan Tanda Kurung Yang Betul?

Menggunakan Tanda Kurung Kanan dalam Senarai Tertib Alfa Rendah (HTML)

Banyak tapak web menggunakan senarai tersusun untuk mempersembahkan kandungan secara berstruktur dan berurutan . Secara lalai, senarai ini menggunakan titik (".") untuk menandakan setiap item senarai. Walau bagaimanapun, mungkin terdapat keadaan di mana anda lebih suka penanda yang berbeza, seperti kurungan kanan ("a)", "b)", dll.).

Soalan: Adakah mungkin untuk sesuaikan gaya senarai alfa bawah dalam HTML untuk menggunakan kurungan kanan dan bukannya titik?

Jawapan:

Anehnya, ya, ada cara bijak untuk mencapai kesan ini menggunakan pembilang CSS. Kaunter membolehkan kami menetapkan penomboran automatik untuk elemen seperti tajuk atau item senarai. Dengan mengubah suai fungsi ini, kami boleh mencipta gaya senarai tersuai dengan kurungan.

Berikut ialah coretan kod yang menunjukkan cara ia dilakukan:

<ol>
  <li>Number 1</li>
  <li>Number 2</li>
  <li>Number 3</li>
  <li>Number 4</li>
  <li>Number 5</li>
  <li>Number 6</li>
</ol>

ol {
  counter-reset: list;
}

ol > li {
  list-style: none;
}

ol > li:before {
  content: counter(list, lower-alpha) ") ";
  counter-increment: list;
}

1. Tetapkan semula Kaunter: Sifat set semula balas memulakan kaunter bernama "senarai" untuk pesanan senarai.
2. Alih Keluar Penggayaan Lalai: Kami menetapkan gaya senarai: tiada pada item senarai untuk mengalih keluar penanda titik lalai.
3. Buat Penanda Tersuai: Di dalam li:before pseudo-element, kami menggunakan sifat kandungan untuk menjana penanda tersuai. Di sini, counter(list, lower-alpha) menyediakan aksara abjad huruf kecil (a, b, c, dll.), dan kami menambahkan kurungan kanan menggunakan ") ".
4. Naikkan Pembilang: kenaikkan balas: senarai naikkan kaunter "senarai" dengan satu untuk setiap senarai item.

Nota: Anda mungkin perlu melaraskan padding dan jarak dalam CSS anda untuk menjajarkan kurungan dengan betul dalam item senarai.

Atas ialah kandungan terperinci Bolehkah Kaunter CSS Menyesuaikan Senarai Tertib Alfa Rendah HTML untuk Menggunakan Tanda Kurung Yang Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!