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

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

Linda Hamilton

Libérer： 2024-12-06 18:58:16

original

301 Les gens l'ont consulté

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;
}
Copier après la connexion
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;
}
Copier après la connexion
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!
source：php.cn

Article précédent：Comment puis-je redimensionner les images de manière réactive avec uniquement du CSS ? Article suivant：Comment toujours afficher la barre de défilement verticale dans les navigateurs WebKit ?

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

0

3

2166

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

0

11

2315

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

0

1

1950

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...

Depuis 2024-04-18 23:52:34

0

1

1829

Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel

Depuis 2024-04-16 10:10:18

0

0

1880

Rubriques connexes
Plus>

Comment insérer de l'audio dans ppt

Utilisation de la fonction fscanf

Comment masquer l'adresse IP sur TikTok

Téléchargement d'E-O Exchange

Recommandation de classement des logiciels de détection de matériel informatique

Introduction aux commandes courantes de postgresql

index.html qu'est-ce que c'est

Comment connecter VB pour accéder à la base de données