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

具有子元素的父元素的 CSS 樣式

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