在带空格的 querySelector 中使用 not [重复]答案

【问题标题】：using not in querySelector with spaces [duplicate]在带空格的 querySelector 中使用 not [重复]
【发布时间】：2017-05-30 16:21:23
【问题描述】：

我想检索所有不是其他元素的子元素的元素。我试过这个代码示例（对我来说这似乎是一个完全有效的 css3 选择器）：

document.querySelector("span:not(p span)")

它在 chrome 中不起作用，我该怎么办？

【问题讨论】：

@charlietfl：那一行代码就是您需要的所有 MCVE。运行它，它会抛出一个 SYNTAX_ERR。
@BoltClock 正在按照示例 html 的思路进行思考。可能很重要，也可能不重要，但肯定有帮助，不太容易完成工作
@charlietfl：很公平。这也可以从选择器中收集到 - 不是 p 的后代的跨度，但它可能并不总是询问者的意图。

标签： javascript dom css-selectors jquery-selectors

【解决方案1】：

可以向所有p span 添加一个类，然后将该类用作not 过滤器

var pSpans = document.querySelector("p span");
for(var i=0; i<pSpans.length; i++){
  pSpans[i].classList.add('p-span');
}

var notPspans = document.querySelector("span:not(.p-span)")

【讨论】：

【解决方案2】：

Support for the selector list argument of :not 目前仅限于 Safari 和 Mobile Safari。其他浏览器还不支持它，而是将选择器视为无效。

基本的:not() 支持只允许简单的选择器，不支持后代组合器。

您可以采取的替代方法包括：

为all spans 设置规则，然后为p span 元素编写不同的规则。
编写一个以其他方式匹配元素的选择器，例如body > span。

具体情况取决于您的标记的确切性质。

【讨论】：