Akhirnya, mudah untuk menukar warna peluru senarai

Dalam tahun -tahun percambahan saya, nasihat umum adalah ini:

• Senarai item

 li {warna: merah; } / * peluru * /
li span {color: hitam; } / * teks * /

Tidak mengerikan, tetapi tidak hebat. Anda "menetapkan semula" segala -galanya di peringkat rentang, jadi ia semakin rumit semakin banyak yang anda lakukan.

Perkara semakin mudah. Mari kita berjalan -jalan melalui dunia ini semakin moden ketika kita pergi.

Alternatifnya adalah untuk merobek gaya lalai dan menggantikannya dengan elemen pseudo.

 ul {
  Senarai gaya: Tiada;
}

li :: sebelum {
  Kandungan: "•";
  warna: merah;
}

Jika kita perlu mengira, kita boleh melakukannya dengan kaunter CSS.

 ol {
  Senarai gaya: Tiada;
  Kaunter-reset: Kaunter My-Awesome;
}

ol li {
  Kaunter-Penangkapan: Kaunter My-Awesome;
}

ol li :: sebelum {
  Kandungan: kaunter (my-awesome-counter) ".";
  warna: merah;
}

Cepat di sini: Ini tidak membantu dengan warna, tetapi anda boleh menentukan watak yang hendak digunakan untuk peluru dengan menetapkan rentetan, seperti:

 ul {
  Senarai gaya-jenis: '✽';
}

Ini adalah seperti Firefox 39 (2015) dan Chrome 79 (yang keluar 9 Disember 2019).

Untuk senarai yang diperintahkan, terdapat satu tan pilihan khusus bahasa. Dan gaya bahasa itu berfungsi untuk kaunter CSS juga, yang boleh anda pelajari lebih lanjut mengenai menyelam dalam Hui Jing.

Tetapi sepanjang masa, kami hanya mahu memilih peluru bodoh (atau apa sahaja) dan gaya itu. Sekarang kita mula dapat berbuat demikian.

Sehingga Firefox 68 (Julai 2019), anda boleh melakukan seperti:

 li :: penanda {
  warna: merah;
  Kandungan: "►";
}

... yang, seperti yang anda lihat, mengubah warna dan perkara peluru yang pasti cara yang paling bersih dan paling mudah untuk pergi, jadi senang melihat kemajuan.

Tejas menunjukkan:

Manuel Matuzović mencatatkan bahawa jika anda menetapkan elemen ke jenis paparan item senarai, anda boleh menggunakan penanda pada mereka juga.

 H2 {
  paparan: senarai-item;
}

H2 :: penanda {
  Warna: Orange;
  Kandungan: "☞";
}

Malah Safari mempunyai sokongan pada masa penulisan ini, jadi kita harus bersandar pada Chrome di sini.

Data sokongan penyemak imbas ini adalah dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi itu dan ke atas.

Desktop

Mudah alih / tablet

Atas ialah kandungan terperinci Akhirnya, mudah untuk menukar warna peluru senarai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!