Maison > interface Web > tutoriel CSS > CSS :not() exclut-il sélectivement les descendants distants ?

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

Susan Sarandon
Libérer: 2024-11-30 17:14:11
original
616 Les gens l'ont consulté

Does CSS :not() Selectively Exclude Distant Descendants?

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;
}
Copier après la connexion

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;
}
Copier après la connexion

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;
}
Copier après la connexion

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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal