Mengapa Safari, Chrome dan Firefox Memaparkan Hasil Berbeza dengan Pemilih `:not()` CSS?

Percanggahan Pemilih:not() dalam Safari, Chrome dan Firefox

Pemilih :not() digunakan untuk memilih elemen yang melakukan tidak sepadan dengan set pemilih yang ditentukan. Walau bagaimanapun, mungkin terdapat percanggahan dalam cara pemilih ini bertindak merentas penyemak imbas, seperti yang dapat kita lihat dalam kod berikut:

em:not(div) {
    color: red
}
em:not(p div) {
    color: blue
}

<p>
    <em>FOO</em>
</p>

Dalam Safari, kod di atas menjadikan teks 'FOO' dalam warna biru, manakala dalam Chrome dan Firefox, ia dipaparkan dalam warna merah. Tingkah laku ini disebabkan oleh kemas kini terbaharu dalam Safari yang melaksanakan versi tahap 4 :not(), yang membolehkannya mengendalikan pemilih yang lebih kompleks.

Dalam pelaksanaan semasa :not(), hanya mudah tunggal pemilih disokong sebagai hujah. Pemilih kompleks, seperti 'p div', tidak disokong oleh reka bentuk pada masa ini. Oleh itu, dalam Chrome dan Firefox, peraturan :not(p div) gagal digunakan dan teks 'FOO' mewarisi warna merah seperti peraturan pertama.

Safari, bagaimanapun, telah melaksanakan yang lebih maju spesifikasi tahap 4, membenarkan pemilih kompleks untuk argumen :not(). Oleh itu, peraturan :not(p div) sepadan dengan elemen 'FOO', menghasilkan warna biru.

Percanggahan ini menyerlahkan potensi cabaran dan pertimbangan semasa membangunkan tapak web yang serasi merentas penyemak imbas. Memandangkan versi penyemak imbas yang lebih baharu memperkenalkan spesifikasi CSS yang dikemas kini, adalah perlu untuk menjejaki keserasian penyemak imbas dan potensi perbezaan pelaksanaan.

Atas ialah kandungan terperinci Mengapa Safari, Chrome dan Firefox Memaparkan Hasil Berbeza dengan Pemilih `:not()` CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!