Adakah CSS :blur Pseudo-class untuk Elemen Penggayaan Tidak Fokus?

Menerokai Ketiadaan Pemilih :blur dalam CSS

Manakala kelas pseudo :focus biasanya digunakan dalam CSS untuk menggayakan elemen dalam fokus, persoalan timbul sama ada wujud :blur yang sepadan kelas pseudo.

Menjawab Soalan

Bertentangan dengan kepercayaan popular, CSS tidak termasuk kelas pseudo :blur. Ini kerana kelas pseudo CSS mewakili keadaan, bukan peristiwa atau peralihan antara keadaan. Dalam kes ini, :focus mewakili elemen dalam fokus, tetapi tiada kelas pseudo untuk elemen kehilangan fokus.

Memahami Had :focus dan :hover

Begitu juga, tiada kelas pseudo :mouseover atau :mouseout. Kelas pseudo ini mewakili elemen dengan peranti penuding berlegar di atasnya atau tidak, tetapi CSS tidak dapat menangkap peristiwa memasuki atau meninggalkan keadaan berlegar.

Pendekatan Alternatif

Jika anda ingin menggunakan gaya pada elemen tanpa fokus, gunakan salah satu daripada ini kaedah:

1. Penolakan dengan :not():

input:not(:focus), button:not(:focus) {
    /* Styles for unfocused inputs and buttons */
}

2. Mengatasi dengan :focus:

input, button {
    /* Styles for all inputs and buttons */
}

input:focus, button:focus {
    /* Styles for focused inputs and buttons */
}

Dengan memahami had ini, pembangun boleh mengurus dengan berkesan gaya dan elakkan pergantungan yang tidak perlu pada kelas pseudo yang sukar difahami.

Atas ialah kandungan terperinci Adakah CSS :blur Pseudo-class untuk Elemen Penggayaan Tidak Fokus?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!