So schließen Sie bestimmte Klassen aus CSS-Selektoren aus: Eine Schritt-für-Schritt-Anleitung

Bestimmte Klassen aus der CSS-Auswahl ausschließen

Beim Targeting von Elementen mit mehreren Klassen ist es wichtig, bestimmte Klassen genau auszuwählen oder auszuschließen, um das gewünschte Ergebnis zu erzielen Styling. Dieser Artikel befasst sich mit einem häufigen Szenario, bei dem Sie eine Hintergrundfarbe auf Elemente mit einer bestimmten Klasse anwenden müssen, aber diejenigen ausschließen müssen, die auch eine andere bestimmte Klasse haben.

Beispielszenario

Betrachten Sie das folgende HTML-Markup:

<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>

Das Ziel besteht darin, eine Hintergrundfarbe auf den ersten Link anzuwenden, wenn der Benutzer mit der Maus darüber fährt, den zweiten jedoch auszuschließen Link von diesem Effekt, da er die zusätzliche Klasse „reMode_selected“ hat.

Erster Versuch

Sie können zunächst das folgende CSS ausprobieren:

<code class="css">.reMode_selected .reMode_hover:hover {}

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

Dies funktioniert jedoch nicht korrekt, da die erste Regel die zweite Regel außer Kraft setzt. Um die Elemente mit der Klasse „reMode_selected“ korrekt auszuschließen, verwenden Sie den Mehrfachklassenselektor:

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

Diese Regel zielt auf Elemente mit der Klasse „reMode_hover“ ab, schließt jedoch diejenigen aus, die auch über die Klasse „reMode_selected“ verfügen, wenn sie vorhanden sind werden darüber geschwebt. Dadurch erhält der erste Link beim Hovern die Hintergrundfarbe, während der zweite Link unverändert bleibt.

Das obige ist der detaillierte Inhalt vonSo schließen Sie bestimmte Klassen aus CSS-Selektoren aus: Eine Schritt-für-Schritt-Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!