使用 querySelectorAll 的选择器无效：不适用于后代
Invalid selector with querySelectorAll :not with descendants
我有一个案例，我需要 select 页面上的不同节点组，并且我需要 排除 某些子元素。我最常见的任务是 selecting 所有 <img> 元素，但不是某些元素的后代。
以我的 fiddle 为例：http://jsfiddle.net/rjdbys13/
我有 2 个 <div>，每个里面都有一个 <img>。我想要 select 所有图像，但不是那些 <div> 之一中的图像（两者都具有不同的 classes）。
为此，这在 jQuery 和 Sizzlejs 中有效，我可以使用 select 或 img:not(.amazingDiv img)。据我了解，这 select 的所有 <img> 元素都不是 <div> 的后代，class 包含 amazingDiv。正如我所说的那样，这对支持更详细 :not 语法的库非常有用，但它失败并出现 querySelectorAll:
中的错误
Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'img:not(.amazingDiv img)' is not a valid selector.
我真的很想避免对我收集的元素做任何 "post processing"，那么有没有办法通过使用 querySelectorAll 来实现我正在寻找的东西？ （我也尝试过使用库 "qwery"、"micro-selector" 和 "nut"）
编辑：由于我搜索 select 或支持某些复杂 :not 功能的组合没有结果，我选择使用第三个派对 select 或引擎 - 捷豹 (github.com/alpha123/Jaguar)。这不是主意，而且速度较慢，但最终结果可能更有效，因为我不需要 "post process" 我的结果。
根据规范，您使用的选择器不正确：
Selectors level 3 does not allow anything more than a single simple
selector within a :not() pseudo-class.
The negation pseudo-class, :not(X), is a functional notation taking a
simple selector (excluding the negation pseudo-class itself) as an
argument. It represents an element that is not represented by its
argument.
遗憾的是，标准 CSS select 或目前无法实现您想要执行的操作。目前，:not() only accepts a single simple selector at a time，所以它的使用非常有限。
在即将推出的标准 :not() will be upgraded to allow combinators and complex selectors 中，其功能将与 select 或库提供的功能相媲美。这意味着，最终，您使用的将是有效的 select 或者一旦浏览器开始实施增强功能。
但与此同时，假设您还不能 select 使用不同的 select 或不使用 :not() 的元素，您将不会如果不 selecting 所有 img 元素并单独排除 .amazingDiv img（在这些元素上说 "post processing"），则无法做到这一点。
如果您忽略 div 本身，那下面的所有图像都会自动被丢弃。
document.querySelectorAll("#parent div:not(.amazingDiv2) img")
我有一个案例，我需要 select 页面上的不同节点组，并且我需要 排除 某些子元素。我最常见的任务是 selecting 所有 <img> 元素，但不是某些元素的后代。
以我的 fiddle 为例：http://jsfiddle.net/rjdbys13/
我有 2 个 <div>，每个里面都有一个 <img>。我想要 select 所有图像，但不是那些 <div> 之一中的图像（两者都具有不同的 classes）。
为此，这在 jQuery 和 Sizzlejs 中有效，我可以使用 select 或 img:not(.amazingDiv img)。据我了解，这 select 的所有 <img> 元素都不是 <div> 的后代，class 包含 amazingDiv。正如我所说的那样，这对支持更详细 :not 语法的库非常有用，但它失败并出现 querySelectorAll:
Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'img:not(.amazingDiv img)' is not a valid selector.
我真的很想避免对我收集的元素做任何 "post processing"，那么有没有办法通过使用 querySelectorAll 来实现我正在寻找的东西？ （我也尝试过使用库 "qwery"、"micro-selector" 和 "nut"）
编辑：由于我搜索 select 或支持某些复杂 :not 功能的组合没有结果，我选择使用第三个派对 select 或引擎 - 捷豹 (github.com/alpha123/Jaguar)。这不是主意，而且速度较慢，但最终结果可能更有效，因为我不需要 "post process" 我的结果。
根据规范，您使用的选择器不正确：
Selectors level 3 does not allow anything more than a single simple selector within a :not() pseudo-class.
The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument.
遗憾的是，标准 CSS select 或目前无法实现您想要执行的操作。目前，:not() only accepts a single simple selector at a time，所以它的使用非常有限。
在即将推出的标准 :not() will be upgraded to allow combinators and complex selectors 中，其功能将与 select 或库提供的功能相媲美。这意味着，最终，您使用的将是有效的 select 或者一旦浏览器开始实施增强功能。
但与此同时，假设您还不能 select 使用不同的 select 或不使用 :not() 的元素，您将不会如果不 selecting 所有 img 元素并单独排除 .amazingDiv img（在这些元素上说 "post processing"），则无法做到这一点。
如果您忽略 div 本身，那下面的所有图像都会自动被丢弃。
document.querySelectorAll("#parent div:not(.amazingDiv2) img")