Mengapakah `input:not(:empty)` Sentiasa Mengembalikan Tiada Hasil?

Memahami Pemilih CSS :not(:empty)

Pemilih CSS :empty direka untuk memadankan elemen yang tidak mengandungi unsur anak. Walau bagaimanapun, apabila digunakan dalam kombinasi dengan pemilih :not(), ia boleh membawa kepada tingkah laku yang tidak dijangka.

Kes Elemen Input

HTML elemen dianggap sebagai "elemen kosong", bermakna ia tidak mempunyai sebarang anak. Oleh itu, ia akan sentiasa memenuhi pemilih :empty, tidak kira sama ada ia mengandungi sebarang nilai teks atau tidak.

Apabila menggunakan input:not(:empty), anda pada asasnya meminta elemen yang kosong dan bukan kosong. Ini adalah percanggahan, itulah sebabnya pemilih tidak pernah mengembalikan sebarang hasil.

Implikasi untuk Penggayaan CSS

Tingkah laku ini mempunyai implikasi untuk penggayaan CSS. Anda tidak boleh menggunakan input:not(:empty) untuk menggayakan medan input secara dinamik berdasarkan sama ada ia kosong atau tidak.

Penyelesaian Alternatif

Untuk menggayakan input kosong pada mulanya medan, anda boleh menggunakan pemilih seperti input[value=""] atau input:not([value]). Walau bagaimanapun, sebaik sahaja pengguna memasukkan teks ke dalam medan, ia tidak lagi sepadan dengan pemilih ini.

Atas ialah kandungan terperinci Mengapakah `input:not(:empty)` Sentiasa Mengembalikan Tiada Hasil?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!