如何使用 CSS 根據子元素設定父元素的樣式？-css教學-PHP中文網

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

Barbara Streisand

發布： 2024-11-28 17:45:17

原創

804 人瀏覽過

How to Style a Parent Element Based on its Child Elements with 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;
}

登入後複製

具有子元素

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