recherche

Maison >interface Web >tutoriel CSS >CSS :not() cible-t-il sélectivement les éléments descendants distants ?

CSS :not() cible-t-il sélectivement les éléments descendants distants ?

Linda Hamilton
Linda Hamiltonoriginal
2024-12-06 18:58:16302parcourir

Does CSS :not() Selectively Target Distant Descendant Elements?

Le sélecteur CSS :not() peut-il cibler des descendants distants ?

La pseudo-classe CSS3 :not() est destinée à exclure des éléments qui correspondent à un sélecteur spécifié. Il a une prise en charge limitée pour le ciblage des descendants distants.

Implémentation et support

Le sélecteur :not() a une implémentation partielle dans les navigateurs modernes, mais sa prise en charge pour le ciblage des descendants distants est limité. Il opère principalement sur les enfants directs d'un élément.

Comportement avec des descendants distants

Dans votre exemple, le sélecteur :not(p) n'affecte pas le , même s'il est un descendant du

. En effet, :not() annule uniquement le sélecteur d'enfant immédiat. Le
L'élément correspond aux critères :not(p) et sa couleur est définie sur rouge. Par la suite, le

Comportement attendu par rapport au comportement réel

Vous vous attendiez à ce que l'élément

L'élément ne doit pas être affecté par le sélecteur :not(), mais il a hérité du changement de couleur. Ce n'est pas le comportement prévu pour cibler les descendants éloignés.

Solution

Pour styliser spécifiquement uniquement

éléments au sein d'un

, vous devez utiliser un sélecteur plus direct :

div p {
    color: black;
}

Améliorations des sélecteurs CSS niveau 4

Les sélecteurs CSS niveau 4 proposent d'étendre : not() pour accepter des sélecteurs complexes avec des combinateurs. Cela vous permettrait de cibler les descendants éloignés avec une plus grande flexibilité. Une fois implémenté, vous pouvez écrire des sélecteurs comme :

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

Ce sélecteur ciblerait tous les

éléments qui ne sont pas des descendants directs d'un

.

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!

css css3 for class this
Déclaration：
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
Article précédent：Comment puis-je redimensionner les images de manière réactive avec uniquement du CSS ?Article suivant：Comment puis-je redimensionner les images de manière réactive avec uniquement du CSS ?

Articles Liés

Voir plus