So verwenden Sie CSS-Selektoren für die nicht-inklusive Auswahl

CSS ist eine sehr leistungsfähige Stylesheet-Sprache, mit der sich das Erscheinungsbild und Layout von HTML-Dokumenten steuern lässt. In CSS ist ein Selektor ein Muster zum Auswählen von HTML-Elementen. Verwenden Sie Selektoren, um den Stil von Elementen in Ihrem Dokument einfach zu ändern und so den gewünschten Effekt zu erzielen. In CSS müssen Sie manchmal einige Elemente auswählen, andere jedoch ausschließen. In diesem Artikel wird erläutert, wie Sie CSS-Selektoren verwenden, um eine exklusive Auswahl durchzuführen.

Warum müssen Sie keine Optionen angeben?

In tatsächlichen Projekten ist es manchmal notwendig, Elemente einer gesamten Webseitenanwendung zu formatieren, einige spezifische Elemente müssen jedoch ausgeschlossen werden. In diesem Fall ist die Auswahl „Ausschließen“ nützlich, um nicht benötigte Elemente auszuschließen und so das Styling realistischer zu gestalten.

Methoden für nicht enthaltene CSS-Selektoren

CSS-Selektoren gibt es in vielen Arten, und einige davon können für Elemente verwendet werden, die nicht im Selektor enthalten sind. In diesem Artikel werden die folgenden häufigen Situationen vorgestellt.

1. Pseudoklassenselektor negieren

Pseudoklassenselektor negieren kann alle Elemente außer einem bestimmten Element auswählen. Normalerweise verwenden wir die Selektorform :not().

Spezifische Syntax:

:not(selector) {}

selector bezieht sich auf das auszuschließende Element.

Zum Beispiel möchten wir den Stil aller p-Elemente festlegen, aber bestimmte p-Elemente ausschließen, deren Klasse hide ist. Der Code lautet wie folgt:

p:not(.hide) {
  color: red;
}

In diesem Beispiel verwenden wir den Selektor :not() um alle p-Elemente auszuschließen, die ein p-Element mit dem Klassennamen hide haben. Auf diese Weise wird die Textfarbe aller p-Elemente rot, die Farbe des p-Elements der Hide-Klasse ändert sich jedoch nicht.

2. Untergeordnete Elemente kombiniert mit Pseudoklassenselektoren

Sie können Nachkommenelemente in Kombination mit Pseudoklassenselektoren verwenden, um alle Elemente unter einem bestimmten Element auszuwählen, bestimmte Elemente jedoch auszuschließen.

Spezifische Syntax:

selector :not(selector) {}

Zum Beispiel möchten wir den Stil aller p-Elemente in divs festlegen, aber bestimmte p-Elemente ausschließen, deren Klasse hide ist. Der Code lautet wie folgt:

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

In diesem Beispiel haben wir Verwendung: Der Not()-Selektor und der Nachkommenelementselektor schließen alle p-Elemente mit dem Klassennamen hide aus. Auf diese Weise wird die Textfarbe aller p-Elemente innerhalb des div-Elements rot, die Farbe des p-Elements der hide-Klasse ändert sich jedoch nicht.

3. Universeller Selektor

Der universelle Selektor (*) kann alle Elemente auswählen, aber wir können ihn mit anderen Selektoren kombinieren, um einige Elemente mit dem universellen Selektor auszuschließen. Zum Beispiel möchten wir Elemente mit einer bestimmten Box-Klasse formatieren, aber eines der Elemente mit der Klasse foo ausschließen. Der Code lautet wie folgt:

.box:not(.foo) {
  background-color: blue;
}

In diesem Beispiel verwenden wir den :not()-Selektor, einen universellen Auswahlselektor und Klassenselektor, ausgenommen alle Elemente mit der Klasse foo. Auf diese Weise formatieren wir nur alle Elemente mit Klassenbox außer der Klasse foo.

Zusammenfassung

In der tatsächlichen Entwicklung müssen wir häufig bestimmte Elemente ausschließen, um bestimmte Stilanforderungen zu erfüllen. In diesem Artikel haben wir drei Möglichkeiten zum Auswählen von Elementen vorgestellt, die nicht enthalten:

• Verwenden Sie den Negations-Pseudoklassenselektor: not()
• Verwenden Sie abgeleitete Elemente in Kombination mit dem Pseudoklassenselektor: not()
• Verwenden Sie die Universeller Selektor (*)

Die oben genannten Methoden können verwendet werden, um den Stil von HTML-Elementen zu steuern, um unterschiedliche Effekte zu erzielen. Wir können sie je nach Bedarf flexibel verwenden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS-Selektoren für die nicht-inklusive Auswahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!