Wie kann ich mithilfe von CSS ein übergeordnetes Element basierend auf seinen untergeordneten Elementen formatieren?

Stil auf übergeordnetes Element anwenden, wenn es ein untergeordnetes Element mit CSS hat

Als Webentwickler können Sie auf Situationen stoßen, auf die Sie Stile anwenden müssen ein übergeordnetes Element basierend auf dem Vorhandensein bestimmter untergeordneter Elemente. Auch wenn dies wie eine unkomplizierte Aufgabe erscheinen mag, kann es eine Herausforderung sein, sie allein mit CSS zu erreichen.

Glücklicherweise bietet CSS Selektoren, die Ihnen dabei helfen können, dies zu erreichen:

has() Selector :

Mit dem has()-Selektor können Sie ein Element auswählen, das ein bestimmtes untergeordnetes Element enthält. Um beispielsweise einen Stil auf ein übergeordnetes Element anzuwenden:

Element, wenn es ein untergeordnetes

Element mit der Klasse „sub“ können Sie das folgende CSS verwenden:

ul li:has(ul.sub) {
  /* Your styles here */
}

Beispiel:

Bedenken Sie die folgende HTML-Struktur:

<ul class="main">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>
    Item 3
    <ul class="sub">
      <li>Sub Item 1</li>
      <li>Sub Item 2</li>
      <li>Sub Item 3</li>
    </ul>
  </li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Mit dem has()-Selektor können Sie einen blauen Hintergrund auf alle

• -Elemente anwenden. Elemente unter dem
  mit der Klasse „main“, die untergeordnetes Element
  Elemente mit der Klasse „sub“:

  ul.main li:has(ul.sub) {
    background-color: blue;
  }

  Hinweis: Der has()-Selektor wird nicht von allen Browsern unterstützt. Wenn Sie eine umfassendere Browserunterstützung benötigen, können Sie stattdessen die Verwendung einer JavaScript-Lösung in Betracht ziehen.

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