Wie schließe ich bestimmte Klassennamen in CSS-Selektoren aus?

Bestimmte Klassennamen in CSS-Selektoren ausschließen

In CSS gibt es Fälle, in denen Sie möglicherweise bestimmte Klassennamen aus Ihren Selektoren ausschließen müssen. Dies ist besonders nützlich, wenn Sie Stile auf mehrere Elemente anwenden möchten, bestimmte diese Stile jedoch nicht erben sollen.

Ein häufiges Szenario besteht darin, Elemente mit einem bestimmten Klassennamen auszuschließen, während Stile auf Elemente mit einem anderen Klassennamen angewendet werden. Betrachten wir das folgende Beispiel:

<code class="html"><a href="" title="Design" class="reMode_design reMode_hover">
    <span>Design</span>
</a>

<a href="" title="Design" class="reMode_design reMode_hover reMode_selected">
    <span>Design</span>
</a></code>

In diesem Beispiel möchten wir beim Hover eine Hintergrundfarbe auf Elemente mit dem Klassennamen „reMode_hover“ anwenden. Wir möchten diese Farbe jedoch nicht anwenden, wenn das Element auch den Klassennamen „reMode_selected“ hat.

<code class="css">/* Do not apply background-color (leave empty) */
.reMode_selected .reMode_hover:hover { }

.reMode_hover:hover { background-color: #f0ac00; }</code>

Obwohl Sie vielleicht erwarten würden, dass die erste Regel funktioniert, ist dies nicht der Fall. Dies liegt daran, dass in CSS ein Leerzeichen zwischen Klassennamen den Nachkommenselektor bezeichnet. „.reMode_selected .reMode_hover“ bedeutet also „wählen Sie .reMode_hover-Elemente aus, die Nachkommen von .reMode_selected sind.“

Um „reMode_selected“-Elemente korrekt auszuschließen, müssen wir den Selektor „not()“ verwenden. Das aktualisierte CSS wäre:

<code class="css">.reMode_hover:not(.reMode_selected):hover { background-color: #f0ac00; }</code>

Diese Regel wendet die Hintergrundfarbe auf .reMode_hover-Elemente an, die nicht den Klassennamen .reMode_selected haben. Dadurch erhält beim Hover nur der erste Link die Hintergrundfarbe, der zweite Link hingegen nicht.

Das obige ist der detaillierte Inhalt vonWie schließe ich bestimmte Klassennamen in CSS-Selektoren aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!