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

CSS `:not()` cible-t-il sélectivement uniquement les enfants immédiats ou les descendants éloignés ?

Mary-Kate Olsen

Libérer： 2024-12-01 19:44:15

original

472 Les gens l'ont consulté

Does CSS `:not()` Selectively Target Only Immediate Children or Distant Descendants?

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

La pseudo-classe CSS3 :not() permet la négation dans les sélecteurs, excluant les éléments qui correspondent à un modèle spécifié. Cependant, sa fonctionnalité présente des limites.

Implémentation actuelle

Comme décrit dans la documentation CSS3 et CSS Selectors Level 4, :not() ne correspond actuellement qu'aux descendants directs. . Dans l'exemple fourni :

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

Copier après la connexion

Ce sélecteur cible les enfants directs de

qui ne sont pas

. Les éléments qui sont des descendants plus éloignés, même s'ils sont contenus dans un

imbriqué dans

, ne sera pas affecté.

Héritage et style

L'héritage des propriétés de style peut compliquer davantage le comportement de :not(). Dans l'exemple de la question, le

élément dans l'élément

hérite de la couleur de texte rouge de son parent, même si le
lui-même correspond au sélecteur :not(). En effet, la négation est appliquée à l'élément parent,
, qui répond aux critères spécifiés.

Améliorations futures

Les sélecteurs CSS niveau 4 proposent d'étendre : not() pour inclure des sélecteurs et combinateurs complexes complets. Cela permettrait un filtrage plus granulaire, activant des sélecteurs tels que :
p:not(div p) {
  color: red;
}
Copier après la connexion
Recommandations

En raison des limitations actuelles de :not() et de la confusion potentielle avec l'héritage , il est généralement conseillé d'éviter de l'utiliser pour filtrer les descendants distants. Envisagez des approches alternatives telles que l'utilisation de sélecteurs directs ou l'application d'un style spécifique aux éléments que vous souhaitez exclure. Une fois la prise en charge des sélecteurs complexes dans :not() implémentée, cette fonctionnalité pourrait devenir plus utile.
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：Pourquoi mon animation CSS3 ne fonctionne-t-elle pas dans Safari ? Article suivant：Comment puis-je ajouter automatiquement un espacement entre les colonnes Bootstrap ?

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

2061

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

2222

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

1872

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