如何使用CSS :has选择器为同级元素设置样式？

你的需求逻辑没问题：当父元素包含.child1子元素时，将.child2设为绿色。代码不生效主要是浏览器兼容性或细节写法的问题，以下是具体解决步骤：

• 确认浏览器版本：:has()选择器需要Chrome 105+、Firefox 121+、Safari 15.4+的支持，旧版本浏览器不兼容这个选择器，直接升级到对应版本即可。
• 优化选择器精度：原代码的.parent:has(.child1) > .child2写法没问题，但可以更明确指定是直接子元素，避免意外匹配嵌套的元素，调整为：

  .parent:has(> .child1) > .child2 {
    background-color: green;
  }
  

• 检查样式优先级：如果还是不生效，打开浏览器开发者工具查看.child2的样式面板，看目标样式是否被其他同优先级样式覆盖。如果是，可通过增加选择器特异性（比如.parent.parent:has(> .child1) > .child2）来提高优先级，尽量避免用!important。

修正后的完整代码：

CSS #

.parent {
  height: 100px;
  width: 200px;
  font-size: 10px;
}
.child1, .child2 {
  width: 100px;
  height: 50px;
  background-color: red;
  border: 2px solid black;
}
.child1 {
  background-color: green;
}

.parent:has(> .child1) > .child2 {
  background-color: green;
}

HTML #

<div class="parent">
  <div class="child1">
    this is child1
  </div>
  <div class="child2">
    this is child2
  </div>
</div>

测试时如果仍有问题，可查看浏览器控制台是否有兼容性警告，或者在开发者工具的元素面板中手动勾选:has()相关样式，确认是否能正常生效。

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