如何在同级元素的后代包含指定类时为目标区块设置背景样式？

嘿，我来帮你搞定这个问题～你现在的思路方向是对的，但CSS选择器的写法没到位，咱们来修正一下：

首先你的HTML结构是没问题的：

<div class="parent"> parent </div>
<ul>
  <li>
    <div class="active">child</div>
  </li>
</ul>

你原来写的 .parent:has(+ .active) 是想找和 .parent 相邻且自身带 .active 类的元素，但实际上 .active 是在同级的 <ul> 标签的后代里，不是直接和 .parent 相邻的元素，所以这个选择器匹配不到目标。

正确的写法应该是这样的：

.parent:has(+ ul .active) {
  background: red;
}

给你拆解下这个选择器的逻辑：

• + ul 精准选中 .parent 的相邻兄弟元素也就是那个 <ul>
• 后面的 .active 表示选中这个 <ul> 下面所有带 .active 类的后代元素
• 整个 :has() 伪类的作用就是：当 .parent 满足“相邻兄弟 <ul> 里存在 .active 后代”这个条件时，就给 .parent 加上红色背景

这样调整之后，你的需求就能完美实现啦～

内容来源于stack exchange