Mengapa Pemilih `:not()` CSS Saya Gagal, dan Bagaimana Saya Boleh Membetulkannya?

Mengapa Pemilih :not() Gagal dalam CSS

Walaupun pemilih :not() jQuery menuntut pematuhan CSS3, ia berbeza dengan ketara daripada standard :not() pemilih dalam CSS.

jQuery Sambungan

Walaupun standard :not() hanya menerima satu pemilih mudah sebagai hujah, jQuery membenarkan mana-mana pemilih sewenang-wenangnya, termasuk senarai pemilih yang dipisahkan koma.

Had CSS

Sebaliknya, standard :not() mempunyai ketat had:

• Tidak boleh melepasi pemilih dipisahkan koma
• Tidak boleh menggabungkan pemilih mudah menjadi pemilih kompaun
• Tidak boleh menggunakan penggabung (cth., jarak)

Punca Kegagalan

Dalam senario yang diberikan, pengubahsuaian CSS cuba meniru tingkah laku :not() jQuery, yang bukan CSS yang sah kerana sebab berikut:

• Membahagikan dengan koma (cth., :not(.alpha, .beta, .gamma)) bukan dibenarkan.
• Melalui pemilih kompaun (cth., badan > div) tidak sah dalam :not().

Penyelesaian CSS Tulen

Untuk mencapai hasil yang diingini dalam CSS tulen, perlu merantai berbilang :not() pemilih:

#sectors > div:not(.alpha):not(.beta):not(.gamma)

Walau bagaimanapun, pendekatan ini lebih terdedah kepada ralat dan tidak konsisten daripada sintaks :not() lanjutan jQuery.

Perkembangan Masa Depan

Pemilih 4 meningkatkan :not() untuk menerima senarai pemilih kompleks yang dipisahkan koma, yang akan selaraskannya dengan jQuery dan jadikan ia lebih serba boleh pada masa hadapan.

Atas ialah kandungan terperinci Mengapa Pemilih `:not()` CSS Saya Gagal, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!