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

• aaaa
• aaaa
• aaaa
• aaaa
• aaaa
  • bbbb
  • bbbb
    • cccc
    • cccc
    • cccc
  • bbbb
  • bbbb
  • bbbb
• aaaa
• aaaa
• aaaa

示例 CSS：

ul li:has(ul.sub) {
    background-color: lightblue;
}

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

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