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

:not(:empty) Pemilih CSS Tidak Berfungsi

Pemilih :not(:empty) gagal menyasarkan medan input dengan kandungan teks . Isu ini timbul apabila menggabungkan berbilang pemilih, terutamanya :not(:empty):not(:focus):invalid. Mengalih keluar :not(:empty) menyelesaikan isu, tetapi menggunakannya dalam :not() nampaknya tidak konsisten.

Untuk menjelaskannya, pemilih :empty menunjukkan elemen tanpa nod anak. Dalam konteks elemen input, ini termasuk elemen tanpa kandungan teks. Walau bagaimanapun, definisi HTML mengklasifikasikan elemen input sebagai tidak sah, bermakna ia sememangnya kosong.

Seperti yang dinyatakan dalam spesifikasi Pemilih, ":kelas pseudo kosong mewakili elemen yang tidak mempunyai anak sama sekali." Ini termasuk elemen input tanpa mengira nilainya, jadi input:not(:empty) secara berkesan tidak sekali-kali memilih apa-apa dalam HTML yang sah.

Walaupun CSS sahaja tidak boleh menggayakan medan input kosong secara dinamik, anda boleh menyasarkan medan kosong pada mulanya menggunakan [value =""] atau :not([value]) untuk mereka bentuk keadaan awal yang sesuai.

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