Qu'est-ce que :not() ? Utilisation simple de :not()

Cet article va vous présenter : qu'est-ce qui ne l'est pas () ? La simple utilisation de :not() permet à tout le monde de comprendre comment :not() est utilisé. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

:not() est un sélecteur de pseudo-classe négatif de CSS. Il s'agit d'un pseudo-sélecteur fonctionnel qui prend un simple sélecteur (illustré ci-dessous) comme argument, puis fait correspondre un ou plusieurs éléments qui ne sont pas représentés par des arguments.

Ce qui peut être utilisé comme paramètre :not() peut être l'un des sélecteurs simples suivants :

1. Sélecteur de balise (tel que p, span, etc.)

2 , sélection de classe (comme .element, .sidebar, etc.)

3. Sélecteur d'ID (tel que #header)

4. -child, :last- of-type)

5. Sélecteur d'attribut (tel que [type="checkbox"])

6. Cependant, passé à : Le paramètre de not() ne peut pas être un sélecteur de pseudo-éléments (tel que ::before, ::after, etc.) ou un autre sélecteur de pseudo-classe négatif.

Par conséquent, les valeurs :not() suivantes ne sont pas valides :

Comme le montre l'exemple ci-dessus, :not() ne peut pas être imbriqué, par exemple :not(: pas( ..)). Il ne peut pas être imbriqué dans la pseudo-classe :matches(), par exemple : selector(:matches(:not(..))).

/* 无效 */
p:not(:not(.same)) {}

p:not(:not(:last-child)) {}

:not(::first-letter) {}

a:not(::after) {}

Comme mentionné précédemment, le sélecteur :not() fera correspondre les éléments de son argument qui ne sont pas représentés par le sélecteur. Ainsi, cette instruction CSS : :

sélectionnera tous les éléments de la liste à l'exception des éléments de la liste avec le nom de classe .new.

li:not(.new) {    
  /* 所有样式列表项，除了具有新类的项之外*/
}

:not() les sélections peuvent être enchaînées à plus de sélections :not(). Par exemple, ce qui suit correspondra à tous les articles #featured sauf ID, puis filtrera les articles avec des noms de classe. tutoriel :

:not() fonctionne également avec d'autres pseudo-classes et pseudo- Lien d'élément. Par exemple, ce qui suit ajoutera le mot "new!" à .old en utilisant le pseudo-élément ::after pour lister les éléments sans nom de classe :

article:not(#featured):not(.tutorial) {    
     /* 格式化文章 */
}

Description :

li ：not（.old）:: after {     
   content：“New！” ;    
   color：deepPink;
}

 : not() pseudo-classe Sélectionnez Autoriser l'écriture d'options inutiles. Par exemple : not(*), cela ne veut pas du tout dire qu’aucun style ne sera jamais appliqué à aucun élément.

Résumé : Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

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!