Pourquoi `input:not(:empty)` ne renvoie-t-il toujours aucun résultat ?

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

Le sélecteur CSS :empty est conçu pour faire correspondre les éléments qui ne contiennent aucun élément enfant. Cependant, lorsqu'il est utilisé en combinaison avec le sélecteur :not(), il peut entraîner un comportement inattendu.

Le cas des éléments d'entrée

Le code HTML L'élément est considéré comme un « élément vide », ce qui signifie qu'il n'a pas d'enfants. Par conséquent, il satisfera toujours le sélecteur :empty, qu'il contienne ou non une valeur de texte.

Lorsque vous utilisez input:not(:empty), vous demandez essentiellement des éléments à la fois vides et pas vide. Il s'agit d'une contradiction, c'est pourquoi le sélecteur ne renvoie jamais aucun résultat.

Implications pour le style CSS

Ce comportement a des implications pour le style CSS. Vous ne pouvez pas utiliser input:not(:empty) pour styliser dynamiquement les champs de saisie selon qu'ils sont vides ou non.

Solutions alternatives

Pour styliser une entrée initialement vide champs, vous pouvez utiliser des sélecteurs comme input[value=""] ou input:not([value]). Cependant, une fois qu'un utilisateur saisit du texte dans le champ, il ne correspondra plus à ces sélecteurs.

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!