使用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中文網其他相關文章！
