在 Web 開發中，可能需要根據父元素是否包含子元素來將樣式套用於父元素。純粹使用 CSS，這可以透過 has() 選擇器來實現。
ul li:has(ul.sub) {
/* Styles for parent li elements with child ul elements with class "sub" */
}這裡，has() 選擇器用於定位parent li 元素（位於ul 中的元素）元素），有一個帶有「sub」類別的child ul 元素。然後可以對此類父 li 元素進行相應的樣式設定。
範例HTML：
<ul class="main">
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa
<ul class="sub">
<li>bbbb</li>
<li>bbbb
<ul>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
</ul>
</li>
<li>bbbb</li>
<li>bbbb</li>
<li>bbbb</li>
</ul>
</li>
<li>aaaa</li>
<li>aaaa</li>
<li>aaaa</li>
</ul>範例CSS：
ul li:has(ul.sub) {
background-color: lightblue;
}使用此包含此列表子清單的所有父li 元素都將具有淺藍色背景顏色。
以上是如何僅使用 CSS 根據子元素設定父元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
