Wie kann ich mithilfe von CSS-Selektoren DOM-Elemente basierend auf dem Status eines anderen Elements auswählen?

Auswählen von Elementen basierend auf Zustandsbeziehungen in CSS

Problem: Wählen Sie andere Elemente im DOM basierend auf einem angegebenen aus Zustand eines Elements.

Bedingungen für Auswählen:

• Stellen Sie Zustände mit einfachen Selektoren dar (z. B. div, [data-status~=finished]).
• Drücken Sie strukturelle Beziehungen mithilfe von Kombinatoren aus, um einen komplexen Selektor zu bilden .
• Machen Sie das Zielelement zum Subjekt des Komplexes Selektor.

Aktuelle Einschränkungen:

Leider können diese Bedingungen nicht alle mit aktuellen CSS-Selektoren erfüllt werden, aus folgenden Gründen:

• Fehlen eines übergeordneten Selektors (um einen Vorfahren des Subjektelements anzusprechen)
• Fehlen eines vorheriger Geschwisterselektor (um Geschwister anzusprechen, die vor dem Betreffelement stehen)

Zukünftige Funktionen:

Der kommende Standard CSS Selectors 4 führt Funktionen ein, die diese Einschränkungen beheben :

• :matches() Pseudoklasse: Gruppiert mehrere Verbindungen Selektoren.
• :has() pseudo-class: Wählt Elemente aus, die untergeordnete Elemente enthalten, die mit einem Selektor übereinstimmen.

Lösung des Beispielproblems:

Mit :has() und :matches() können wir das Beispielproblem in CSS-Selektoren lösen 4:

section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin) {
  /* styles for targeted elements */
}

Alternativer Ansatz mit JavaScript:

Während diese Funktionen noch nicht von allen Browsern unterstützt werden, können Sie derzeit JavaScript verwenden, um Elemente mit :has auszuwählen ():

$('section:has(> div[data-status~=finished]) + section > div').filter('.blink, .spin').css('color', 'red');

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS-Selektoren DOM-Elemente basierend auf dem Status eines anderen Elements auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!