使用 not in querySelector with spaces

Question

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

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

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

Answer 1

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

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

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

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

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

Answer 2

可以将 class 添加到所有 p span，然后将 class 用作 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)")

使用 not in querySelector with spaces

using not in querySelector with spaces

javascript

dom

css-selectors

jquery-selectors