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