CSS :not() exclut-il sélectivement les descendants distants ?

Descendants de distance et le sélecteur CSS :not()

La pseudo-classe CSS3 :not() est conçue pour nier un sélecteur spécifique correspondre. Il a été largement implémenté dans les navigateurs. Cependant, une idée fausse courante concernant ce sélecteur est son applicabilité aux descendants distants.

Bien que :not() réussisse à annuler les correspondances pour les éléments enfants directs, il ne se comporte pas comme prévu pour les descendants plus éloignés. Comme illustré dans l'exemple fourni :

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

Dans cet extrait, le

L'élément hérite toujours de la couleur rouge de son parent

, même s'il n'est pas un descendant direct du

. Cela se produit car :not() annule uniquement directement la correspondance pour cet élément, pas ses descendants.

La documentation pour :not() dans CSS3 et CSS Selectors Level 4 ne traite pas explicitement de ce comportement. Cependant, il a été confirmé que ce comportement est intentionnel et que le sélecteur n'est pas destiné à prendre en charge la correspondance des petits-enfants.

Solution

Pour obtenir le résultat souhaité de en excluant les descendants distants de la correspondance :not(), une méthode différente doit être utilisée. Une approche courante consiste à spécifier une couleur pour l'élément spécifique que vous souhaitez exclure, en écrasant toutes les valeurs héritées :

div {
  color: red;
}

div p {
  color: black;
}

Amélioration de niveau 4 des sélecteurs CSS

Sélecteurs CSS Le niveau 4 propose une amélioration du sélecteur :not(), permettant l'utilisation de sélecteurs plus complexes en son sein. Ce changement permettra à la syntaxe suivante d'annuler correctement les descendants :

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

Bien que cette amélioration ne soit pas encore largement implémentée dans les navigateurs, elle fournit une solution prometteuse pour faire correspondre et nier les descendants distants à l'aide de :not().

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