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

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

Susan Sarandon

Libérer： 2024-12-14 18:57:23

original

343 Les gens l'ont consulté

Does CSS `:not()` Selectively Target Only Immediate Children and Grandchildren?

Le sélecteur :not() s'étend-il aux descendants distants ?

En CSS3, la pseudo-classe :not() fournit un moyen pour exclure certains éléments d'un sélecteur. Cependant, son comportement peut prêter à confusion lorsqu'il s'agit de descendants éloignés.

Implémentation actuelle

Selon la documentation officielle et l'analyse du support du navigateur, le sélecteur :not() uniquement s'applique aux enfants ou petits-enfants directs de l'élément ciblé.

Considérez cet exemple :

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

Copier après la connexion

Cette règle style tous les enfants ou petits-enfants directs de

qui ne sont pas

Cependant, le sélecteur :not() ne s'étend pas au-delà des petits-enfants.

Le problème

Dans cet exemple, le :

<div>
    <ul>
        <li>This is red</li>
    </ul>
    <p>This is NOT</p>
    <blockquote><p>This is red but is not supposed to be!</p></blockquote>
</div>

Copier après la connexion

Dans ce cas, l'élément

l'élément correspond à la condition *:not(p) puisqu'il est un descendant de
, tandis que l'élément
l'élément qu'il contient hérite de la couleur rouge.

Solution

Le comportement correct est pour l'élément
élément pour conserver sa couleur par défaut. Pour y parvenir, la règle doit cibler tous les
éléments directement :
div p { color: black; }
Copier après la connexion
Futures améliorations des sélecteurs CSS niveau 4

La proposition des sélecteurs CSS niveau 4 améliore le sélecteur :not() pour accepter des sélecteurs complexes complets avec combinateurs. Cela signifie que nous pourrons écrire des sélecteurs comme :
p:not(div p) { color: red; }
Copier après la connexion
Cette syntaxe étendue permettra un ciblage plus précis des descendants distants.
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!

source：php.cn

Article précédent：Comment puis-je générer des nuances de couleurs CSS en utilisant uniquement des variables CSS ? Article suivant：Comment puis-je styliser différemment les liens de la page actuelle en utilisant CSS et jQuery ?

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

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2190

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2340

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1963

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...