javascript - querySelectorAll 的选择器无效 :not with descendants

Question

我遇到了这样的情况:我需要在页面上选择不同的节点组，并且需要排除某些子元素。我最常见的任务是选择所有 <img>元素，但不是某些元素的后代。

以我的 fiddle 为例:http://jsfiddle.net/rjdbys13/我有2个<div> s，每个都有 <img>里面。我想选择所有图像，但不选择其中之一 <div> 中的图像s(两者都有不同的类)。

为此，我可以使用像 img:not(.amazingDiv img) 这样的选择器，并且这适用于 jQuery 和 Sizzlejs。 。据我了解，这会选择所有 <img>不是 <div> 后代的元素包含 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/Jaguar)。这不是主意，而且速度较慢，但​​最终结果可能更有效，因为我不需要“后处理”我的结果。

Answer 1

根据规范，您使用的选择器不正确:

Selectors level 3 does not allow anything more than a single simpleselector within a :not() pseudo-class.

The negation pseudo-class, :not(X), is a functional notation taking asimple selector (excluding the negation pseudo-class itself) as anargument. It represents an element that is not represented by itsargument.