Maison > interface Web > tutoriel CSS > Pourquoi `input:not(:empty)` ne fonctionne-t-il pas comme prévu ?

Pourquoi `input:not(:empty)` ne fonctionne-t-il pas comme prévu ?

DDD
Libérer: 2024-11-05 11:02:02
original
670 Les gens l'ont consulté

Why Does `input:not(:empty)` Not Work as Expected?

Dévoilement des mystères du sélecteur CSS :not(:empty)

Lorsque vous essayez de contrôler l'apparence d'une entrée vide ou non vide champs utilisant le sélecteur CSS :not(:empty), de nombreux développeurs rencontrent un comportement inattendu. Ce sélecteur semble fonctionner parfaitement avec d'autres combinaisons, mais introduit des anomalies une fois que :not(:empty) est ajouté au mix.

La confusion vient de la nature unique des éléments d'entrée. HTML définit les éléments vides comme ceux qui « sont vides par nature », y compris les éléments étiqueter. Par conséquent, tous les éléments void, quel que soit leur attribut value, sont systématiquement considérés comme vides par la pseudo-classe :empty.

De plus, la spécification Selectors indique explicitement que :empty cible les éléments sans nœuds enfants, y compris contenu du texte. Par conséquent, les champs de saisie, bien qu'ils aient une valeur, manqueront toujours de nœuds enfants et, par conséquent, correspondront au sélecteur :not(:empty).

En résumé, utiliser input:not(:empty) dans un HTML approprié le document ne correspondra toujours pas à quoi que ce soit. Cette limitation est due à la nature inhérente des éléments void en HTML et à la définition de la pseudo-classe :empty dans les sélecteurs CSS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal