如何使用 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中文网其他相关文章！