Pourquoi :not(:empty) ne fonctionne-t-il pas pour les champs de saisie ?

Comprendre le sélecteur CSS :not(:empty)

La pseudo-classe :not(:empty) représente des éléments HTML qui n'ont pas enfants. Cependant, pour les éléments vides comme , cette condition est toujours vraie, qu'une valeur soit attribuée à l'élément ou non.

Pourquoi :not(:empty) ne fonctionne pas avec l'entrée Fields

Les éléments vides, tels que , n'ont aucun nœud enfant. Par conséquent, ils sont toujours considérés comme vides selon la définition HTML et correspondront toujours à la pseudo-classe :empty.

De plus, la spécification Selectors définit :empty comme un élément sans aucun enfant, y compris les nœuds enfants comme text ou CDATA avec une longueur non nulle.

Conséquences pour le style CSS

Par conséquent, input:not(:empty) ne correspondra jamais à aucun champs dans un document HTML valide. Par conséquent, vous ne pouvez pas styliser dynamiquement un champs basés uniquement sur des règles CSS, car une fois le texte saisi, l'élément n'est plus considéré comme vide.

Approches alternatives

La seule façon de sélectionner

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!