如何使用CSS：有嵌套元素选择器？

Question

如何使用

:has

选择器深入多个级别？

我尝试了以下代码，但似乎不支持：

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

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

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

Answer 1

假设您只需要对

<div>

进行样式设置，如果它有一个后代

<p>

元素，而该元素又具有一个后代

<span>

元素，我建议：

div {
  background-color: blue;
}

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

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

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

JS Fiddle 演示.

值得补充的是，这目前在 Firefox（版本 111.0.1，在 Ubuntu 22.10 上运行）中不起作用。因此，浏览器的差异和不一致是可以预料的。

Answer 2

回答原来的问题，

:has

不能嵌套。引用MDN：

:has() 伪类不能嵌套在另一个 :has() 中。 这是因为许多伪元素基于其祖先的样式有条件地存在，并且允许通过 :has() 查询这些元素可以引入循环查询。