CSS `:not()` cible-t-il sélectivement uniquement les descendants immédiats ?-tutoriel CSS-php.cn

CSS `:not()` cible-t-il sélectivement uniquement les descendants immédiats ?

Patricia Arquette

Libérer： 2024-12-03 05:26:10

original

860 Les gens l'ont consulté

Does CSS `:not()` Selectively Target Only Immediate Descendants?

Le sélecteur CSS :not() est-il destiné aux descendants éloignés ?

La pseudo-classe CSS3 :not(), telle que décrite dans la documentation officielle sur http://www.w3.org/TR/css3-selectors/#negation, est conçue pour faire correspondre les éléments qui ne correspondent pas à un sélecteur donné. Cependant, les utilisateurs ont trouvé des fonctionnalités limitées dans son utilisation avec des descendants distants.

Considérons l'exemple :

div :not(p) { color: red; }

Copier après la connexion

Alors que ce sélecteur fonctionne lorsque

est un enfant direct de

, il échoue lorsque

est un descendant plus éloigné. Ce comportement est intentionnel, car :not() annule uniquement les descendants immédiats de l'élément cible.

Dans le cas où

contient un
, c'est le
lui-même qui correspond à *:not(p) et hérite du style. Le
L'élément lui-même compte toujours dans la négation, héritant de la couleur du texte de son parent.

Pour surmonter cette limitation, cibler
éléments directement est recommandé :
p { color: black; }
Copier après la connexion
Sélecteurs niveau 4 propose d'améliorer :not() pour accepter des sélecteurs complexes complets contenant des combinateurs, permettant un ciblage descendant plus spécifique. Cependant, cette fonctionnalité est encore en phase de mise en œuvre.
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!