Apakah fungsi pseudo-element::marker dalam CSS?

Apakah peranan pseudo-element::marker dalam CSS Contoh kod khusus diperlukan

Peranan pseudo-element::marker dalam CSS adalah untuk menetapkan gaya untuk bahagian tanda item senarai. Dalam senarai HTML biasa, bahagian penanda merujuk kepada titik tumpu, nombor atau gaya tersuai di hadapan item senarai. Dengan menggunakan ::penanda pseudo-elemen, kami boleh menyesuaikan penampilan bahagian yang ditandakan bagi item senarai, sekali gus meningkatkan kesan visual halaman web.

Berikut ialah beberapa contoh kod yang biasa digunakan untuk menunjukkan aplikasi khusus bagi ::elemen pseudo penanda:

1. Gaya tanda senarai tak tertib tersuai:

ul {
  list-style-type: none;
}

li::marker {
  content: "★";
  color: red;
  font-weight: bold;
}

Dalam kod di atas, kami mula-mula menukar tanda lalai tak tertib senarai Untuk membatalkan gaya, tetapkan jenis gaya senarai kepada tiada. Seterusnya, gunakan ::penanda pseudo-elemen untuk menggayakan bahagian penanda item senarai. Dalam contoh ini, kami menetapkan kandungan teg kepada ★, warna kepada merah dan berat fon kepada tebal.

2. Gaya tanda senarai pesanan tersuai:

ol {
  list-style-type: none;
}

li::marker {
  content: counter(li);
  color: blue;
  font-size: 20px;
  margin-right: 10px;
}

Dalam kod di atas, kami juga membatalkan gaya tanda lalai senarai pesanan. Kemudian, gunakan ::penanda pseudo-elemen untuk menggayakan bahagian penanda item senarai. Dalam contoh ini, kami menetapkan kandungan penanda kepada nilai kiraan item senarai, menggunakan pembilang(li). Kami juga menetapkan warna penanda kepada biru, saiz fon kepada 20 piksel dan jidar kanan bahagian penanda kepada 10 piksel.

Perlu diambil perhatian bahawa ::penanda pseudo-elemen hanya boleh digunakan untuk menyenaraikan item (iaitu elemen li) dan tidak boleh digunakan pada jenis elemen lain, seperti perenggan (elemen p) atau tajuk (elemen h1-h6 ), dan lain-lain.

Ringkasan:
Elemen pseudo ::penanda dalam CSS boleh digunakan untuk menyesuaikan gaya bahagian tanda item senarai. Dengan menetapkan atribut yang berkaitan bagi ::penanda pseudo-elemen, kami boleh menukar kandungan, warna, gaya fon, dsb. tanda, dengan itu meningkatkan kesan visual halaman web. Kod contoh di atas boleh membantu kami lebih memahami dan menggunakan elemen pseudo-penanda ::.

Atas ialah kandungan terperinci Apakah fungsi pseudo-element::marker dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!