Mengapa :not(:empty) Tidak Berfungsi untuk Medan Input?

Memahami Pemilih CSS :not(:empty)

Kelas pseudo :not(:empty) mewakili elemen HTML yang tidak mempunyai kanak-kanak. Walau bagaimanapun, untuk elemen kosong seperti , syarat ini sentiasa benar, tidak kira sama ada elemen itu mempunyai nilai yang dikaitkan dengannya.

Mengapa :not(:empty) Tidak Berfungsi dengan Input Medan

Elemen kosong, seperti , tidak mempunyai sebarang nod anak. Oleh itu, ia sentiasa dianggap kosong mengikut definisi HTML dan akan sentiasa sepadan dengan :empty pseudo-class.

Selain itu, spesifikasi Pemilih mentakrifkan :kosong sebagai elemen tanpa sebarang anak, termasuk nod anak seperti teks atau CDATA dengan panjang bukan sifar.

Akibat untuk Penggayaan CSS

Akibatnya, input:not(:empty) tidak akan sepadan dengan mana-mana medan dalam dokumen HTML yang sah. Oleh itu, anda tidak boleh menggayakan kosong secara dinamik medan berdasarkan peraturan CSS semata-mata, kerana sebaik sahaja teks dimasukkan, elemen itu tidak lagi dianggap kosong.

Pendekatan Alternatif

Satu-satunya cara untuk memilih

Atas ialah kandungan terperinci Mengapa :not(:empty) Tidak Berfungsi untuk Medan Input?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!