如何根據 CSS 中特定子元素的存在來設定父元素的樣式？

如果父元素有CSS 子元素，則將樣式應用於父元素

在CSS 中，可以根據子元素的存在來設定父元素的樣式使用has() 選擇器實作。

要在父級包含類別為「sub」的子層級時將樣式套用於父級，請使用下列CSS規則：

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

例如，如果您有下列HTML：

<ul class="main">
  <li>Parent 1</li>
  <li>Parent 2</li>
  <li>Parent 3 with Child
    <ul class="sub">
      <li>Child of Parent 3</li>
    </ul>
  </li>
  <li>Parent 4</li>
</ul>

以及以下CSS：

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

輸出將顯示「Parent 3 with Child」為淺藍色，表示父級 (li) 有一個類別為「sub」的子級。

請注意問題的建議答案中提到的 $ 選擇器尚未在 CSS4 中標準化。相反，has() 選擇器是實現此功能的受支援方法。

以上是如何根據 CSS 中特定子元素的存在來設定父元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！