Mengapa Pemilih `:not()` CSS Berkelakuan Berbeza dalam Safari, Chrome dan Firefox?

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

Penyemak imbas sering melaksanakan ciri dengan keupayaan yang berbeza-beza, yang membawa kepada percanggahan pemaparan. Pemilih CSS :not() ialah satu kes sedemikian, di mana ia mempamerkan gelagat berbeza merentas Safari, Chrome dan Firefox.

Masalah:

The :not() pemilih gagal berfungsi seperti yang diharapkan apabila menentukan berbilang peringkat dalam hujah. Dalam contoh ini:

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

Safari memaparkan teks dalam warna biru, manakala Chrome dan Firefox menggunakan merah.

Punca:

Punca utama ialah pelaksanaan Safari tahap 4 :not() baru-baru ini, yang membenarkan pemilih kompleks sebagai argumen. Chrome dan Firefox, sebaliknya, hanya menyokong argumen peringkat tunggal dalam versi semasa :not().

Penjelasan:

Pemilih kompleks termasuk berbilang pemilih kompaun dipisahkan oleh penggabung (cth., keturunan, adik beradik). Dalam kes ini, "p div" ialah pemilih kompleks yang terdiri daripada dua pemilih kompaun ("p" dan "div") yang dipisahkan oleh penggabung keturunan.

Gelagat Jangkaan:

Mengikut spesifikasi tahap 4 :not(), pemilih harus menggunakan peraturan "biru" pada mana-mana elemen "em" yang bukan di dalam elemen "div", tidak kira sama ada ia bersarang di dalam elemen "p".

Status Semasa:

Adalah dijangkakan bahawa Chrome dan Firefox akan akhirnya mengguna pakai spesifikasi baharu, yang membawa kepada tingkah laku yang konsisten merentas pelayar. Sehingga itu, pembangun harus mengetahui kemungkinan percanggahan apabila menggunakan pemilih :not() dengan berbilang peringkat dalam penyemak imbas ini.

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