如何仅使用 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;
}

使用此 CSS，主列表中包含子列表的所有父 li 元素都将具有浅蓝色背景颜色。

以上是如何仅使用 CSS 根据子元素设置父元素的样式？的详细内容。更多信息请关注PHP中文网其他相关文章！