Wie schließe ich eine bestimmte Klasse aus einem CSS-Selektor aus?

Wie schließe ich eine bestimmte Klasse aus einem CSS-Selektor aus?

Beim Arbeiten in begrenzten Umgebungen, in denen JavaScript nicht verfügbar ist, CSS wird zu einem unverzichtbaren Werkzeug für dynamisches Styling. Eine häufige Herausforderung besteht darin, zu verhindern, dass bestimmte Elemente von einer bestimmten CSS-Regel betroffen sind, wenn sie auch über eine andere Klasse verfügen.

Betrachten Sie zur Veranschaulichung die Aufgabe, die Hintergrundfarbe eines Elements zu ändern beim Schweben, es sei denn, es verfügt auch über die Klasse „reMode_selected“. Der folgende Code zeigt einen Versuch, dies zu erreichen:

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

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

Dieser Ansatz schlägt jedoch fehl, da er auf Elemente mit den Klassen „reMode_hover“ und „reMode_selected“ abzielt, unabhängig davon, ob das Hover-Ereignis vorliegt ausgelöst wird. Um dieses Problem zu beheben, muss der Mehrfachklassenselektor ohne Leerzeichen verwendet werden (Nachkommenselektor):

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

Dieser Selektor verwendet die Pseudoklasse „:not“, um Elemente mit der Klasse „reMode_selected“ aus der Klasse auszuschließen Stilisierung der Hintergrundfarbe, wenn Sie mit der Maus über die „reMode_hover“-Elemente fahren.

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