CSS :not() exclut-il sélectivement les descendants distants ?-tutoriel CSS-php.cn

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

Susan Sarandon

Libérer： 2024-11-30 17:14:11

original

538 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!