如何使用CSS :has选择器选中多层嵌套元素？

你的代码写法本身是合法且正确的，问题大概率出在浏览器对嵌套:has()选择器的支持上。

先确认你的浏览器版本 #

嵌套使用:has()需要浏览器支持CSS选择器 Level 4的相关特性，目前主流浏览器的支持情况：

• Chrome/Edge: 105+
• Firefox: 121+（需在about:config中开启layout.css.has-selector.enabled）
• Safari: 15.4+

如果你的浏览器版本低于上述要求，嵌套:has()会无法生效。

验证代码有效性 #

下面是你的代码，在支持的浏览器中，第一个包含<span>的<div>会被设置橙色背景：

CSS 代码

div:has(p:has(span)) {
  background: orange;
}

HTML 代码

<div>
  <p>
    <span>Hello</span>
  </p>
</div>

<div>
  <p>Bye</p>
</div>

替代方案（针对旧浏览器） #

如果需要兼容不支持嵌套:has()的浏览器，可以换一种写法，直接通过后代选择器结合:has()：

div:has(p span) {
  background: orange;
}

这个写法和你原来的代码效果完全一致，且对:has()的支持要求更低，只要浏览器支持基础的:has()即可。

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