Wie kann ich übergeordnete Elemente mithilfe von CSS basierend auf ihren untergeordneten Inhalten formatieren?

Zielelemente basierend auf untergeordneten Inhalten mit CSS

Möglicherweise müssen Sie eindeutige CSS-Stile auf übergeordnete Elemente anwenden, die auf den untergeordneten Elementen basieren sie enthalten. Während sich herkömmliche CSS-Selektoren auf die Ausrichtung auf bestimmte Elemente konzentrieren, gibt es eine Möglichkeit, mithilfe des :has()-Selektors eine bedingte Gestaltung zu erreichen.

Die Syntax für :has() lautet wie folgt:

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

Mit dieser Syntax können Sie Stile auf div-Elemente anwenden, die bestimmte untergeordnete Elemente enthalten. Beispielsweise würden die obigen Regeln einen roten Rand zu div-Elementen hinzufügen, die ein untergeordnetes Element der Klasse „a“ enthalten, und einen blauen Rahmen zu div-Elementen, die ein untergeordnetes Element der Klasse „b“ enthalten.

Beispiel :

<style>
  div:has(div.a) {
    border: solid 3px red;
  }
  div:has(div.b) {
    border: solid 3px blue;
  }
</style>
<div>
  <div class="a"></div>
</div>

<div>
  <div class="b"></div>
</div>

Dieser Code würde zu zwei div-Elementen führen, eines mit einem roten Rand und eines mit einem blauen Rand, entsprechend den untergeordneten Elementen, die sie enthalten enthalten.

Hinweis: Der :has()-Selektor wird in modernen Browsern weitgehend unterstützt, funktioniert jedoch möglicherweise nicht in älteren Browsern.

Das obige ist der detaillierte Inhalt vonWie kann ich übergeordnete Elemente mithilfe von CSS basierend auf ihren untergeordneten Inhalten formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!