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

:not(:empty) Le sélecteur CSS ne fonctionne pas

Le sélecteur :not(:empty) ne parvient pas à cibler les champs de saisie avec du contenu textuel . Ce problème survient lors de la combinaison de plusieurs sélecteurs, en particulier :not(:empty):not(:focus):invalid. La suppression de :not(:empty) résout le problème, mais son utilisation dans :not() semble incohérente.

Pour clarifier, le sélecteur :empty indique les éléments sans nœuds enfants. Dans le contexte des éléments d'entrée, cela inclut ceux sans contenu textuel. Cependant, la définition HTML classe les éléments d'entrée comme vides, ce qui signifie qu'ils sont intrinsèquement vides.

Comme indiqué dans la spécification Selectors, ":empty pseudo-class représente un élément qui n'a aucun enfant." Cela inclut les éléments d'entrée quelle que soit leur valeur, donc input:not(:empty) ne sélectionne jamais rien dans du HTML valide.

Bien que CSS seul ne puisse pas styliser dynamiquement les champs de saisie vides, vous pouvez cibler les champs initialement vides en utilisant [value =""] ou :not([value]) pour concevoir les états initiaux appropriés.

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!