如何使用 CSS 根據子元素內容設定父元素的樣式？

使用CSS 基於子內容的目標元素

您可能會遇到需要根據子元素將獨特的CSS 樣式應用於父元素的情況它們包含。雖然傳統的 CSS 選擇器專注於定位特定元素，但有一種方法可以使用 :has() 選擇器來實現條件樣式。

:has() 的語法如下：

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

使用此語法，您可以將樣式套用於包含特定子元素的 div 元素。例如，上述規則將為包含類別「a」的子元素的 div 元素新增紅色邊框，並為包含類別「b」的子元素的 div 元素新增藍色邊框。

範例:

<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>

此程式碼將產生兩個div 元素，一個具有紅色邊框，一個具有藍色邊框，對應於它們的子元素包含。

注意： :has() 選擇器在現代瀏覽器中得到廣泛支持，但可能無法在舊版瀏覽器中工作。

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