Peringatan cepat bahawa: adalah () dan: di mana () pada dasarnya sama dengan satu perbezaan utama

Baru-baru ini, banyak artikel telah membincangkan kepraktisan CSS :is() pseudo-selectrator relasi, yang dapat meningkatkan pembacaan pemilih komposit. Contohnya:

 : adalah (seksyen, artikel, selain, nav): adalah (H1, H2, H3, H4, H5, H6) {
  Warna: #Bada55;
}

Bersamaan dengan:

 Bahagian H1, Seksyen H2, Seksyen H3, Seksyen H4, Bahagian H5, Seksyen H6, 
Artikel H1, Artikel H2, Artikel H3, Artikel H4, Artikel H5, Artikel H6, 
Selain H1, selain H2, selain H3, selain H4, selain H5, selain H6, 
NAV H1, NAV H2, NAV H3, NAV H4, NAV H5, NAV H6 {
  Warna: #Bada55;
}

Walau bagaimanapun, kekhususan :is() pemilih bergantung kepada pemilih yang paling spesifik parameternya. Terdapat sedikit masalah dengan elemen mudah dan pemilih kelas, tetapi jika pemilih ID dimasukkan, kekhususan menjadi tinggi:

 / * Kekhususan: 0 0 1 */
: adalah (H1, H2, H3, H4, H5, H6) {
  Warna: #Bada55;
}

/ * Kekhususan: 1 0 0 */
: IS (H1, H2, H3, H4, H5, H6, #ID) {
  Warna: #Bada55;
}

Ini kadang -kadang berguna, sebagai contoh, anda dengan sengaja boleh menambah ID fiksyen untuk memaksa gaya, sama seperti kata kunci !important .

Tetapi bagaimana jika anda tidak mahu ini? Sesetengah artikel mencadangkan pemilih bersarang, tetapi ini tidak mudah seperti :is() .

Pada masa ini,: :where() pemilih berguna! Ia sama seperti :is() , tetapi tidak mempunyai masalah kekhususan. Kekhususannya selalu sifar. Fikirkan ia sebagai tetapan semula tertentu:

 / * Kekhususan: 0 0 0 */
: di mana (H1, H2, H3, H4, H5, H6) {
  Warna: #Bada55;
}

/ * Kekhususan: 0 0 0 */
: di mana (H1, H2, H3, H4, H5, H6, #ID) {
  Warna: #Bada55;
}

Oleh itu, jika kekhususan :is() dipengaruhi oleh beberapa pemilih, maka :where() akan menjadi pilihan yang lebih baik.

Atas ialah kandungan terperinci Peringatan cepat bahawa: adalah () dan: di mana () pada dasarnya sama dengan satu perbezaan utama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!