带有 querySelectorAll 的无效选择器：不带有后代答案

【问题标题】：Invalid selector with querySelectorAll :not with descendants带有 querySelectorAll 的无效选择器：不带有后代
【发布时间】：2015-01-27 20:08:47
【问题描述】：

我有一个案例，我需要在页面上选择不同的节点组，并且我需要排除某些子元素。我最常见的任务是选择所有 <img> 元素，但不选择某些元素的后代。

以我的小提琴为例：http://jsfiddle.net/rjdbys13/ 我有 2 个<div>s，每个里面都有一个<img>。我想选择所有图像，但不是那些<div>s 之一中的图像（都具有不同的类）。

为此，它适用于 jQuery 和 Sizzlejs，我可以使用像 img:not(.amazingDiv img) 这样的选择器。据我了解，这会选择所有<img> 元素，这些元素不是<div>s 的后代，其类包含amazingDiv。正如我在支持更详细的:not 语法的库中所说的那样，这非常有效，但它会因querySelectorAll 中的错误而失败：

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'img:not(.amazingDiv img)' is not a valid selector.

我真的很想避免对我收集的元素进行任何“后期处理”，那么有没有办法通过使用querySelectorAll 来实现我正在寻找的东西？（我也尝试过使用库"qwery"、“micro-selector”和“nut”）

编辑：由于我搜索选择器组合以支持一些复杂的:not 功能没有结果，我选择使用第 3 方选择器引擎 - Jaguar (github.com/alpha123/捷豹）。这不是想法，而且速度较慢，但最终结果可能更有效，因为我不需要“后处理”我的结果。

【问题讨论】：

当你可以选择积极的条件时，为什么要选择消极的条件。 document.querySelectorAll(".amazingDiv2 img")
@Vijay 那是完全正确的，但是我只使用了第二个 div 和类作为示例。我实际上希望所有图像不在某种描述的祖先之下。
如果你忽略 div 本身，它下面的所有图像都会被自动丢弃。 document.querySelectorAll("#parent div:not(.amazingDiv2) img")

标签： javascript css-selectors selectors-api

【解决方案1】：

根据规格，您使用的选择器不正确：

选择器级别 3 只允许在 :not() 伪类中使用单个 simple selector。

The negation pseudo-class, :not(X)，是一个函数符号简单的选择器（不包括否定伪类本身）作为争论。它表示一个元素，它没有被它的论据。

【讨论】：

我希望情况并非如此......而且与常规函数不同，似乎没有任何简单的方法来填充这个:(
AS @Vijay 评论为什么不使用var elements = document.querySelectorAll(".amazingDiv img"); ？

【解决方案2】：

很遗憾，目前您无法使用标准 CSS 选择器来实现您的目标。目前是:not() only accepts a single simple selector at a time，所以使用非常有限。

在即将发布的标准:not() will be upgraded to allow combinators and complex selectors 中，其功能与选择器库提供的功能相当。这意味着，最终，一旦浏览器开始实施增强功能，您所使用的将是一个有效的选择器。

但与此同时，假设您无法使用不使用 :not() 的其他选择器来选择您想要的元素，如果不选择所有 img 元素，您将无法执行此操作并分别排除.amazingDiv img（对这些元素表示“后处理”）。

【讨论】：

感谢您的详细解答！

【解决方案3】：

如果你忽略 div 本身，它下面的所有图像都会被自动丢弃。

document.querySelectorAll("#parent div:not(.amazingDiv2) img")

【讨论】：

我看不出有什么问题——事实上它是如此简单，我不敢相信我没有尝试过。但是，我确实大量使用了查询方法的 context 参数，为此我已经有一个 HTMLElement 实例。