So verwenden Sie den Pseudoklassenselektor :not, um CSS-Stile für Elemente auszuwählen, die die Kriterien nicht erfüllen

So verwenden Sie den Pseudoklassenselektor :not, um CSS-Stile für Elemente auszuwählen, die die Bedingungen nicht erfüllen.

In CSS verwenden wir häufig Selektoren, um Elemente auszuwählen, die bestimmte Bedingungen erfüllen, und wenden dann Stile auf sie an. Manchmal müssen wir jedoch Elemente auswählen, die bestimmte Kriterien nicht erfüllen, und ihnen unterschiedliche Stile zuweisen. Zu diesem Zeitpunkt können Sie den Pseudoklassenselektor :not verwenden. Der Pseudoklassenselektor

:not ermöglicht es uns, einige Elemente daraus auszuschließen, indem wir eine Reihe von Selektoren angeben und nur Elemente auswählen, die nicht mit diesen Selektoren übereinstimmen. Die grundlegende Syntax lautet wie folgt:

:not(selector)

wobei selector ein gültiger CSS-Selektor ist, der das auszuschließende Element angibt. Wir können Tag-Selektoren, Klassen-Selektoren, ID-Selektoren oder andere Arten von Selektoren verwenden.

Hier ist ein Beispiel mit dem Pseudoklassenselektor :not:

HTML-Code:

<ul>
  <li class="item">Item 1</li>
  <li class="item">Item 2</li>
  <li class="item">Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

CSS-Code:

.item {
  color: red;
}

li:not(.item) {
  color: blue;
}

Im obigen Beispiel haben wir eine ungeordnete Liste, in der die ersten drei Listenelemente Klassen mit dem Namen „item“ haben ", die letzten beiden Listenelemente haben keine Klassennamen. Wir möchten den ersten drei Listenelementen eine rote Textfarbe und den letzten beiden Listenelementen eine blaue Textfarbe zuweisen.

Diesen Effekt können wir erreichen, indem wir den Pseudoklassenselektor :not verwenden und Elemente mit dem Klassennamen „.item“ ausschließen.

Im gesamten Dokument wird die blaue Textfarbe auf alle li-Elemente angewendet, außer denen mit dem Klassennamen „.item“. Und auf Elemente mit dem Klassennamen „.item“ wird die Textfarbe rot angewendet.

Mit dem Pseudoklassenselektor :not können wir Elemente, die bestimmte Bedingungen nicht erfüllen, flexibler auswählen und Stile auf sie anwenden. Dies kann in bestimmten Situationen sehr nützlich sein, insbesondere wenn wir eine spezielle Verarbeitung für Elemente außerhalb eines bestimmten Typs oder einer bestimmten Bedingung durchführen müssen.

Es ist zu beachten, dass der Pseudoklassenselektor :not möglicherweise nicht mit einigen älteren Browserversionen kompatibel ist. Daher sind bei der Verwendung Tests und Kompatibilitätsüberlegungen erforderlich. Darüber hinaus kann sich die Komplexität der Selektoren auf die Leistung auswirken. Seien Sie daher vorsichtig, wenn Sie sie verwenden.

Zusammenfassend lässt sich sagen, dass wir mithilfe des Pseudoklassenselektors :not Elemente auswählen können, die bestimmte Bedingungen nicht erfüllen, und unterschiedliche Stile auf sie anwenden können. Die Syntax ist einfach und klar, leicht zu verwenden und kann in einigen Fällen eine bessere Flexibilität und Benutzerfreundlichkeit bieten.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie den Pseudoklassenselektor :not, um CSS-Stile für Elemente auszuwählen, die die Kriterien nicht erfüllen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!