Qu'est-ce que le: non () pseudo-classe dans CSS?

Qu'est-ce que le: non () pseudo-classe dans CSS?

La pseudo-classe :not() dans CSS est une notation fonctionnelle qui vous permet d'exclure certains éléments d'une sélection. Il est utilisé pour créer des sélecteurs plus spécifiques en annulant un sélecteur donné entre les parenthèses. Par exemple, p:not(.special) sélectionnerait tous les éléments <p></p> sauf ceux qui ont une classe de "spécial".

La syntaxe pour la pseudo-classe :not() est :not(selector) , où selector peut être un sélecteur simple comme un sélecteur de type, un sélecteur de classe, un sélecteur d'identification ou une pseudo-classe (mais pas une autre pseudo-claire de négation ou un pseudo-élément). La pseudo-classe :not() fait partie de la spécification CSS3 et est largement pris en charge entre les navigateurs modernes.

Comment puis-je utiliser la pseudo-classe: non () pour améliorer mes sélecteurs CSS?

L'utilisation de la pseudo-classe :not() peut améliorer considérablement la précision et la maintenabilité de vos sélecteurs CSS de plusieurs manières:

1. Réduire la spécificité : en excluant les éléments, vous pouvez garder vos sélecteurs moins spécifiques, ce qui peut aider à maintenir la cascade et à éviter les guerres de spécificité. Par exemple, au lieu de .container .content p.special pour cibler tous les éléments p sauf ceux avec la classe "spéciale", vous pouvez simplement utiliser p:not(.special) .
2. Simplifier les sélecteurs : la pseudo-classe :not() peut vous aider à écrire plus de CSS concises. Par exemple, au lieu d'écrire des règles distinctes pour style des éléments différemment, vous pouvez les combiner en un seul sélecteur. Par exemple, button:not([disabled]) cible tous les boutons sauf ceux qui sont désactivés.
3. Améliorer la lisibilité : utiliser :not() peut rendre vos intentions plus claires pour les autres développeurs lisant votre CSS. Un sélecteur comme nav ul:not(.dropdown) indique clairement que vous stylisez toutes les listes non ordonnées dans une barre de navigation, à l'exception de celles avec la classe "déroulante".
4. Améliorer les performances : dans certains cas, l'utilisation :not() peut aider le navigateur à optimiser le rendu en excluant rapidement des éléments qui n'ont pas besoin d'être stylisés, bien que cela dépend de l'implémentation du navigateur.

Quels sont les cas d'utilisation courants pour la pseudo-classe: non () dans la conception Web?

La pseudo-classe :not() est polyvalente et possède plusieurs cas d'utilisation courants dans la conception Web:

1. Exclusion des éléments interactifs : vous voudrez peut-être appliquer des styles à tous les éléments sauf ceux interactifs. Par exemple, *:not(button):not(input):not(select) peut être utilisé pour styliser tous les éléments sauf les contrôles de formulaire.
2. Conception réactive : Dans la conception réactive, vous voudrez peut-être appliquer des styles aux éléments, sauf sur certaines tailles d'écran. Par exemple, @media (max-width: 768px) { div:not(.mobile-friendly) { display: none; } } masquerait tous les éléments div à l'exception de ceux qui ont une classe "adaptée aux mobiles" sur des écrans inférieurs à 768px.
3. Styling Text Elements : Souvent, vous souhaitez appliquer les styles de texte à tous les éléments de texte sauf ceux de certains conteneurs. Par exemple, body *:not(h1):not(h2):not(h3) { font-size: 16px; } définirait la taille de la police sur 16px pour tous les éléments à l'intérieur du corps, à l'exception des titres.
4. Styles de réinitialisation : le :not() pseudo-classe peut être utile pour réinitialiser les styles. Par exemple, input:not([type="submit"]):not([type="button"]) { border: none; } supprimerait les frontières de toutes les entrées sauf les types de soumission et de bouton.

La pseudo-classe: non () peut-elle être combinée avec d'autres sélecteurs, et si oui, comment?

Oui, la pseudo-classe :not() peut être combinée avec d'autres sélecteurs pour créer des règles plus complexes et précises. Voici quelques façons de le combiner:

1. Chaîne avec d'autres sélecteurs : vous pouvez chaîner :not() avec d'autres sélecteurs pour affiner vos sélections. Par exemple, ul li:not(:first-child):not(:last-child) sélectionne tous les éléments li dans un ul sauf les premier et les derniers.
2. Combinant avec des pseudo-classes : la pseudo-classe :not() peut être combinée avec d'autres pseudo-classes comme :hover , :focus ou :checked . Par exemple, button:not(:disabled):hover appliquerait des styles à des boutons qui ne sont pas désactivés lorsqu'ils sont survolés.
3. Utilisation avec des sélecteurs d'attribut : vous pouvez utiliser :not() avec des sélecteurs d'attribut pour exclure les éléments en fonction de leurs attributs. Par exemple, a:not([href^="mailto:"]) sélectionne tous les éléments d'ancrage sauf ceux avec un attribut href commençant par "Mailto:".
4. Nidification dans d'autres sélecteurs : la pseudo-classe :not() peut être imbriquée au sein d'autres sélecteurs. Par exemple, .container > *:not(.special) > p sélectionnerait tous les éléments p qui sont des enfants directs de n'importe quel élément à l'intérieur .container , à l'exception de ceux qui ont la classe "spéciale".

En combinant :not() avec d'autres sélecteurs, vous pouvez créer des règles CSS hautement ciblées et efficaces qui améliorent le style et les performances de vos conceptions Web.

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!