Adakah jQuery Benar-benar Menyokong Semua Pemilih CSS3? Misteri :nth-last-child() dan Beyond.

Merungkai Sokongan Pemilih CSS3 jQuery: Demystifying :nth-last-child() dan Beyond

Sementara jQuery menawarkan sokongan untuk pelbagai CSS pemilih, keupayaan CSS3nya mungkin membuatkan anda tertanya-tanya. Satu contoh sedemikian ialah pemilih :nth-last-child(), nampaknya beroperasi dalam penyemak imbas moden seperti Firefox, Chrome dan IE 9 tetapi peliknya tiada dalam dokumentasi rasmi.

Seni Bina Pemilih jQuery

Pelaksanaan pemilih jQuery bergantung pada pendekatan serampang dua mata. Ia pada mulanya cuba menggunakan kaedah document.querySelectorAll() asli, memberikan keserasian dengan pemilih CSS terkini. Jika pendekatan ini gagal, jQuery akan kembali pada pustaka pemilihnya sendiri, Sizzle.

Strategi ini memberikan penjelasan untuk kefungsian ketara :nth-last-child() dalam penyemak imbas tertentu. Sebagai pemilih CSS yang sah, penyemak imbas yang menyokong document.querySelectorAll() (seperti Firefox, Chrome dan IE 9) boleh memprosesnya terus dan mengembalikan senarai nod yang sesuai, dengan berkesan memintas Sizzle.

Membuka tabir Pemilih CSS3 yang Disokong

Bermula dari jQuery 1.9, Sizzle (pustaka pemilih jQuery) menyokong hampir semua pemilih CSS3 yang ditakrifkan dalam standard tahap 3 Pemilih, dengan beberapa pengecualian yang ketara:

• Elemen Pseudo: Pilihan eksplisit tidak boleh dilakukan kerana penjelmaan berasaskan CSS sebagai abstraksi pepohon dokumen.
• Kelas pseudo dinamik: Berasaskan acara kelas pseudo seperti :hover, :active, dan :focus tidak disokong. Sebaliknya, pengendali acara mesti digunakan untuk melaksanakan kod semasa elemen memasuki dan meninggalkan keadaan ini.
• Awalan ruang nama: jQuery tidak mengendalikan jarak nama dalam CSS.

Pemilih Diperkenalkan dalam jQuery 1.9

Dengan jQuery 1.9, julat pemilih tahap 3 tersedia, termasuk:

• :target
• : akar
• :anak-terakhir()
• :jenis-jenis()
• :jenis-terakhir()
• :jenis-pertama
• :jenis-terakhir
• :jenis-sahaja

Kaveat Keserasian

jQuery 1.8 dan versi terdahulu tidak mempunyai sokongan untuk pemilih di atas, serta :lang(), pemilih CSS2.

Kes :nth-last-child()

Dalam contoh anda dengan :nth-last-child(), pemilih berjaya diproses oleh Firefox, Chrome dan IE 9 kerana penyemak imbas ini menyokong document.querySelectorAll(). Walau bagaimanapun, mod emulasi IE 8 gagal kerana ia tidak menyokong :nth-last-child(). Memandangkan jQuery/Sizzle juga tidak melaksanakan pemilih ini, tiada mekanisme sandaran, mengakibatkan kegagalan.

Merapatkan Jurang

Dalam kes di mana ia tidak boleh dilakukan untuk menaik taraf kepada jQuery 1.9 atau lebih baru, anda boleh mempertimbangkan untuk melaksanakan kelas pseudo yang hilang menggunakan sambungan pemilih tersuai jQuery. Perlu diingat bahawa jQuery 1.9 menawarkan keserasian dengan versi IE yang lebih lama sambil menambah sokongan untuk pemilih yang disebutkan.

Atas ialah kandungan terperinci Adakah jQuery Benar-benar Menyokong Semua Pemilih CSS3? Misteri :nth-last-child() dan Beyond.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!