Kann ich ein übergeordnetes Element basierend auf seinen untergeordneten Elementen in CSS formatieren?

Stilelemente basierend auf untergeordneten Elementen in CSS

Ist es möglich, CSS-Stile auf ein Element basierend auf den darin enthaltenen untergeordneten Elementen anzuwenden?

Ja, CSS bietet eine Möglichkeit, dies mithilfe der Pseudoklasse :has() zu erreichen. Es ermöglicht Ihnen, Elemente basierend darauf anzusprechen, ob sie ein bestimmtes untergeordnetes Element enthalten.

Syntax:

div:has(child-selector) {
  /* CSS styles for elements containing the child */
}

Beispiel:

Um einem Div-Element einen roten Rand zu geben, wenn es ein untergeordnetes Div mit der Klasse enthält "a":

div:has(div.a) {
  border: solid 3px red;
}

Hinweis: Die Pseudoklasse :has() wird in modernen Browsern unterstützt, jedoch nicht in älteren Browsern wie Internet Explorer.

Alternative mit JavaScript (jQuery):

Wenn Sie Kompatibilität mit älteren Browsern benötigen, Sie können JavaScript mit jQuerys :has() selector:

$('div:has(div.a)').css('border', '1px solid red');

verwenden

Das obige ist der detaillierte Inhalt vonKann ich ein übergeordnetes Element basierend auf seinen untergeordneten Elementen in CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!