Was ist die: Not () Pseudo-Klasse in CSS?

Was ist die: Not () Pseudo-Klasse in CSS?

Die :not() Pseudo-Klasse in CSS ist eine funktionale Notation, mit der Sie bestimmte Elemente aus einer Auswahl ausschließen können. Es wird verwendet, um spezifischere Selektoren zu erstellen, indem ein bestimmter Selektor innerhalb der Klammern negiert wird. Zum Beispiel würde p:not(.special) alle <p></p> Elemente außer denen auswählen, die eine Klasse von "Special" haben.

Die Syntax für die :not() Pseudo-Klasse ist :not(selector) , wobei selector ein einfacher Selektor wie ein Typ-Selektor, Klassenauswahl, ID-Selektor oder Pseudo-Klasse sein kann (aber keine andere Negationspfeilklasse oder ein Pseudo-Element). Die :not() Pseudo-Klasse ist Teil der CSS3-Spezifikation und wird in modernen Browsern weithin unterstützt.

Wie kann ich die: nicht () Pseudo-Klasse verwenden, um meine CSS-Selektoren zu verbessern?

Die Verwendung der :not() Pseudo-Klasse kann die Präzision und Wartbarkeit Ihrer CSS-Selektoren auf verschiedene Weise erheblich verbessern:

1. Reduzierung der Spezifität : Wenn Sie Elemente ausschließen, können Sie Ihre Selektoren weniger spezifisch halten, was dazu beitragen kann, die Kaskade aufrechtzuerhalten und Spezifitätskriege zu vermeiden. Anstelle von .container .content p.special , um alle p -Elemente außer denen mit der "Spezial" -Klasse anzusprechen, können Sie einfach p:not(.special) verwenden.
2. Vereinfachung der Selektoren : Die :not() Pseudo-Klasse kann Ihnen helfen, prägnantere CSS zu schreiben. Anstatt beispielsweise separate Regeln für das unterschiedliche Stil von Elementen zu schreiben, können Sie sie zu einem Selektor kombinieren. Beispielsweise zielt button:not([disabled]) auf alle Schaltflächen, außer auf die deaktivierten, die deaktiviert sind.
3. Verbesserung der Lesbarkeit : Verwenden :not() kann Ihre Absichten für andere Entwickler, die Ihr CSS lesen, klarer machen. Ein Selektor wie nav ul:not(.dropdown) zeigt eindeutig an, dass Sie alle ungeordneten Listen in einer Navigationsleiste stylen, mit Ausnahme der Klasse "Dropdown".
4. Verbesserung der Leistung : In einigen Fällen kann die Verwendung :not() helfen, das Rendering zu optimieren, indem sie schnell Elemente ausschließen, die nicht gestylt werden müssen, obwohl dies von der Implementierung des Browsers abhängt.

Was sind gemeinsame Anwendungsfälle für die: Not () Pseudo-Klasse im Webdesign?

Die :not() Pseudo-Klasse ist vielseitig und verfügt über mehrere gemeinsame Anwendungsfälle im Webdesign:

1. Ohne interaktive Elemente auszuschließen : Möglicherweise möchten Sie Stile auf alle Elemente anwenden, mit Ausnahme der interaktiven. Beispielsweise *:not(button):not(input):not(select) kann verwendet werden, um alle Elemente mit Ausnahme von Formularsteuerungen zu stylen.
2. Responsive Design : In Responsive Design möchten Sie möglicherweise Stile auf Elemente anwenden, außer auf bestimmten Bildschirmgrößen. Zum Beispiel @media (max-width: 768px) { div:not(.mobile-friendly) { display: none; } } würde alle div Elemente mit Ausnahme derjenigen mit einer "mobilfreundlichen" Klasse auf Bildschirmen kleiner als 768px verbergen.
3. Styling -Textelemente : Oft möchten Sie Textstile auf alle Textelemente mit Ausnahme von bestimmten Containern anwenden. Zum Beispiel body *:not(h1):not(h2):not(h3) { font-size: 16px; } würde die Schriftgröße für alle Elemente im Körper auf 16px einstellen, mit Ausnahme von Überschriften.
4. Zurücksetzen von Stilen : Die :not() Pseudo-Klasse kann zum Zurücksetzen von Stilen nützlich sein. Zum Beispiel input:not([type="submit"]):not([type="button"]) { border: none; } würde Grenzen aus allen Eingängen entfernen, außer Senden- und Tastentypen.

Kann die: Not () Pseudo-Klasse mit anderen Selektoren kombiniert werden, und wenn ja, wie?

Ja, die :not() Pseudo-Klasse kann mit anderen Selektoren kombiniert werden, um komplexere und präzisere Regeln zu erstellen. Hier sind einige Möglichkeiten, es zu kombinieren:

1. Ketten mit anderen Selektoren : Sie können ketten :not() mit anderen Selektoren, um Ihre Auswahl zu verfeinern. Zum Beispiel wählt ul li:not(:first-child):not(:last-child) alle li Elemente in einem ul , außer den ersten und letzten.
2. Kombination mit Pseudoklassen : Die :not() Pseudo-Klasse kann mit anderen Pseudoklassen wie :hover :focus oder :checked kombiniert werden. Zum Beispiel button:not(:disabled):hover würde Stile auf Schaltflächen anwenden, die nicht deaktiviert sind, wenn sie übertrieben werden.
3. Verwenden Sie mit Attributauswahlern : Sie können verwenden :not() mit Attributauswahlern, um Elemente basierend auf ihren Attributen auszuschließen. Beispielsweise wählt a:not([href^="mailto:"]) alle Ankerelemente mit Ausnahme derjenigen mit einem href -Attribut, das mit "Mailto:" beginnt.
4. Verschachteln in anderen Selektoren : Die :not() Pseudo-Klasse kann in anderen Selektoren verschachtelt werden. Zum Beispiel würde .container > *:not(.special) > p würden alle p -Elemente auswählen, die direkte Kinder eines beliebigen Elements in .container sind, mit Ausnahme der Klasse "Special".

Durch Kombinieren :not() mit anderen Selektoren können Sie hoch gezielte und effiziente CSS -Regeln erstellen, die das Styling und die Leistung Ihrer Webdesigns verbessern.

Das obige ist der detaillierte Inhalt vonWas ist die: Not () Pseudo-Klasse in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!