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

如果父元素有CSS 子元素，如何將樣式應用到父元素

在Web 開發中，通常需要根據元素與元素的關係對元素應用特定的樣式DOM 中的其他元素。一個特殊的挑戰是對包含子元素的父元素進行樣式設定。

考慮以下HTML 結構：

<ul class="main">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>
        <ul class="sub">
            <li>Sub Item 1</li>
            <li>
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                    <li>Sub Sub Item 3</li>
                </ul>
            </li>
            <li>Sub Item 3</li>
            <li>Sub Item 4</li>
            <li>Sub Item 5</li>
        </ul>
    </li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
</ul>

要在CSS 中設定

樣式，請考慮下列HTML 結構：

ul li:has(ul.sub) {
    background-color: yellow;
    border: 1px solid black;
}

具有子元素

的元素元素，您可以使用:has()選擇器：
透過將背景顏色和邊框屬性套用於滿足 :has(ul.sub) 條件的 li 元素，您可以將它們與沒有任何子 ul.sub 元素的 li 元素。 需要注意的是，並非所有瀏覽器都支援 :has() 選擇器，因此使用此方法可能需要考慮瀏覽器相容性。

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