带有 querySelectorAll 的无效选择器 :不带后代

Invalid selector with querySelectorAll :not with descendants

本文关键字：后代 选择器 querySelectorAll 无效 带有      更新时间：2023-09-26

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

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

为此，这在jQuery和Sizzlejs中有效，我可以使用像img:not(.amazingDiv img)这样的选择器。据我了解，这选择所有不是 <div> s 后代的<img>元素，其类包含 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功能是徒劳的，我选择使用第三方选择器引擎 - 捷豹（github.com/alpha123/Jaguar）。这不是想法，而且速度较慢，但最终结果可能更有效，因为我不需要"后处理"我的结果。

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

选择器级别 3 不允许任何超出单个简单内容的内容：not（） 伪类中的选择器。

否定伪类 ：not（X） 是一种函数表示法，采用简单选择器（不包括否定伪类本身）作为论点。它表示一个不由其表示的元素论点。

不幸的是，目前使用标准CSS选择器无法实现您想要做的事情。目前，:not()一次只接受一个简单的选择器，因此它的使用非常有限。

在即将推出的标准中，:not()将进行升级，以允许组合器和复杂的选择器，使其功能与选择器库提供的功能相媲美。这意味着，一旦浏览器开始实施增强功能，最终，您正在使用的内容将成为有效的选择器。

但与此同时，假设您还不能使用不使用:not()的其他选择器来选择所需的元素，如果不选择所有img元素并单独排除.amazingDiv img，您将无法执行此操作（在这些元素上表示"后处理"）。

如果您忽略div 本身，则其下的所有图像都会被自动丢弃。 

document.querySelectorAll("#parent div:not(.amazingDiv2) img")
相关文章：