logo标签列表

为什么CSS中的[select parent]选择器不起作用？

cssreferenceparent
8

我正在开发一个网页，需要选择另一个元素的“父级”，但是不起作用，即使在这样简单的页面上也不起作用：

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
<div class="">
  <a href="#" class="prueba">prueba!</a>
</div>
<style media="screen">
  div:has(.prueba) {
    border: solid 2px red;
  }
</style>
  </body>
</html>

如果我在样式部分使用div，它是有效的，但我需要捕获第一个子元素中的div，即"class prueba"的"a"，但对我来说无效。
谢谢！
顺便提一下，选择器是错误的，应该是 div:has( > .prueba)。 - Temani Afif
无法工作，谢谢Temani Afif。 - Juan Camacho
这个程序不能工作，因为它还没有被支持，但你的选择器也是错误的。 - Temani Afif
1个回答
16

:has()选择器是CSS4中的内容，目前（2019年1月）几乎没有任何浏览器支持。在支持出现之前，您需要使用JavaScript。

请参见Can I Use - :has()

2
2023年第二季度及以后，在Firefox v103中，默认情况下已禁用此功能。根据他们的文档：“从版本103开始：此功能在layout.css.has-selector.enabled首选项后面（需要设置为true）。要在Firefox中更改首选项，请访问about:config。” https://developer.mozilla.org/en-US/docs/Web/CSS/:has - Franklin Skipwhistle
截至2023年9月，根据此答案中的链接，该功能的采用率已超过80%。而在Chrome浏览器中，:has()仍然对我无效。是否有办法删除此答案或重新打开问题？ - undefined
@MichaelG 这不是 Stack Overflow 的工作方式。如果你有问题，请开一个新的问题并展示你的代码。 - undefined
这样只会被标记为重复内容并关闭。如果ChatGPT不知道答案，放弃比使用SO更容易。 - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接