如何使用CSS为包含带有open类子元素的父元素设置背景颜色

Great question! 要实现「当父元素包含带open类的子元素时，给父元素设置背景色」这个需求，CSS的:has()伪类就是最直接的解决方案——它专门用来选择包含特定子元素的父元素，完全匹配你的场景。

核心实现代码 #

针对你给出的HTML结构，只需要一行CSS就能搞定：

.parent:has(.arrow.open) {
  background-color: blue;
}

代码解释 #

• :has()：这个CSS伪类是父选择器的核心，它会检查当前元素是否包含括号内指定的子元素
• .arrow.open：指定我们要检测的子元素条件——既是.arrow类，又带有.open类的元素
• 当.parent元素内部存在符合这个条件的子元素时，就会为.parent添加上蓝色背景

完整可运行示例 #

把下面的代码组合起来，就能看到你想要的效果：

<div class='parent'>
  <span class='title'>title</span>
  <span class='arrow open'>I should have a blue background!</span>
</div>

<style>
.parent:has(.arrow.open) {
  background-color: blue;
  padding: 8px; /* 加个内边距让效果更明显 */
  color: white; /* 文字变白方便阅读 */
}
</style>

拓展说明 #

• 如果你的需求是只要父元素内有任何带open类的子元素（不管子元素有没有其他类），可以把CSS简化成：

  .parent:has(.open) {
    background-color: blue;
  }
  

• 浏览器兼容性：:has()已经被Chrome、Firefox 120+、Safari等主流现代浏览器支持，如果需要兼容更旧的浏览器，可以用JavaScript做降级处理（比如遍历所有.parent元素，检查子元素是否有open类，手动添加背景色类）

内容的提问来源于stack exchange，提问作者anil