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

hpxqektj 于 2023-03-24 发布在其他

关注(0)|答案(2)|浏览(137)

如何使用:has选择器进行多个级别的深度操作？
我尝试了以下代码，但似乎不受支持：

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

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

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

2条答案

假设你只需要样式化<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 demo .
值得注意的是，这在Firefox（版本111.0.1，运行在Ubuntu 22.10上）中目前还不起作用，因此浏览器的差异和不一致是可以预料的。

不幸的是，：has选择器目前只支持单层嵌套。示例代码中的选择器div:has(p:has(span))试图将div元素作为目标，该div元素包含一个p元素，该p元素包含一个span元素。然而，正如您所发现的，现代Web浏览器不支持此选择器。以下代码将工作。

div p span {
    background: orange;
 }

但这只会给'Hello'世界着色。而且

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

此代码将为整个<p>标记着色
另一种解决方案是使用JavaScript。