Mengapakah `input:not(:empty)` Tidak Berfungsi Seperti Yang Dijangkakan?

Menyingkap Misteri Pemilih CSS :not(:empty)

Apabila cuba mengawal kemunculan input kosong atau tidak kosong medan menggunakan pemilih CSS :not(:empty), ramai pembangun menghadapi tingkah laku yang tidak dijangka. Pemilih ini nampaknya berfungsi dengan sempurna dengan gabungan lain, tetapi memperkenalkan anomali apabila :not(:empty) ditambahkan pada campuran.

Kekeliruan berpunca daripada sifat unik elemen input. HTML mentakrifkan elemen kosong sebagai elemen yang "kosong secara semula jadi", termasuk tag. Akibatnya, semua elemen void, tanpa mengira atribut nilainya, secara konsisten dianggap kosong oleh :empty pseudo-class.

Selain itu, spesifikasi Selectors secara eksplisit menyatakan bahawa :empty menyasarkan elemen tanpa nod anak, termasuk kandungan teks. Akibatnya, medan input, walaupun mempunyai nilai, akan sentiasa kekurangan nod anak dan, oleh itu, sepadan dengan pemilih :not(:empty).

Ringkasnya, menggunakan input:not(:empty) dalam HTML yang betul dokumen akan sentiasa gagal untuk memadankan apa-apa. Had ini timbul kerana sifat semula jadi unsur-unsur kosong dalam HTML dan takrifan kelas pseudo :kosong dalam Pemilih CSS.

Atas ialah kandungan terperinci Mengapakah `input:not(:empty)` Tidak Berfungsi Seperti Yang Dijangkakan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!