是否可以选择没有特定类型子元素的元素？

Posted 2023-03-06

【中文标题】是否可以选择没有特定类型子元素的元素？

【英文标题】：Is it possible to select elements that do not have a child of a certain type?

【发布时间】：2018-09-16 22:09:04

【问题描述】：

我正在尝试选择不是 <img> 元素的父元素的 <a> 元素。 （注意：如果相关的话，我想选择的一些锚是没有孩子的。）我试过这个：

a > :not(img) 

还有这个：

a:not(> img) 

但它们似乎都不起作用。我将如何在 CSS 中实现这一点？

【问题讨论】：

正在路上：:has

我在下面回答。如果您问另一个关于您想要实现的特定视觉效果的问题，有人可能会为您提供解决方法，或者至少告诉您，您在不求助于 javascript 的情况下确实被卡住了。

我是唯一一个注意到img 不能有子元素的人吗？

@Temani Afif：可能不是，但在这种情况下，img 是孩子，而不是父母，所以没什么好担心的：P

@BoltClock 好 .. 看来我的头脑还没有为父选择器做好准备：/

【参考方案1】：

有一个spec，目前正在草稿中，用于:has() 伪类。目前还没有浏览器支持。如果有一天该规范得到批准和实施，您就可以这样做：

a:not(:has(img)) 
    // Styles

MDN page 表示:has 永远不会在样式表中工作，只能在 JavaScript 中工作；但话说回来，它链接到规范中关于“动态选择器配置文件”的部分，该部分显然不再存在。

我认为浏览器供应商在实现 CSS 功能时通常会遇到问题，这些功能需要了解仅在创建选定元素后才存在的 DOM，所以我不知道我们是否应该对此抱有希望。遵循邮件列表或通常比我聪明的人可能会提供更好的预后。

【讨论】：

静态和动态配置文件最近分别重命名为快照和实时，破坏了链接（我也必须在这里找到并修复我所有的答案，这只是你必须做的事情试图引用，或者在 MDN 文档的情况下，一个不稳定的规范，而不是我要抱怨的东西）。配置文件本身并没有消失。但是，自 2015 年以来，对于 :has() 在任一配置文件中的表现如何，仍然没有任何新的发展或发现。您的推理并没有那么遥远，这就是配置文件首先存在的原因。

你知道为什么:has() 表现不佳吗？我知道 CSS 选择器是从右到左实现的（即 a img 选择所有 img 元素，然后过滤掉没有 a 祖先的元素）。通过简单地获取每个选定节点的父节点来实现父选择器似乎很简单，对吧？

我今天在 :has 上阅读了 Bugzilla 线程。它给出的一个例子是，如果你允许:has(:hover)，一个简单的实现将不得不在每个 mouseenter 或 mouseleave 事件上重新计算文档中每个元素的样式。

@James Ko：因为 :has() isn't just a parent selector，所以没有实现起来那么简单。已经讨论过提供 :has() 的子集，例如 E:has(> F)，它确实将 的功能与父选择器完全一样，但正如我在之前的评论中提到的那样没有工作自 2015 年以来，浏览器供应商已经完全做到了这一点，所以没有人知道 如果 它的性能会好还是坏，更不用说为什么了。第 75 个引用的动态伪类示例是另一个可能的原因。

【参考方案2】：

很遗憾，没有。你需要使用 jQuery。

您可以使用 CSS 做一些解决方法：

为没有图像子元素的链接分配一个类，并使用该类为链接设置正常样式（例如a.classcolor: red）

为具有图像子元素的链接分配一个类，并使用a:not(.class) 更改其颜色

原因：CSS 中没有父选择器。看： Is there a CSS parent selector?, CSS Parent/Ancestor Selector