querySelectorAll 和 .not()答案

【问题标题】：querySelectorAll and .not()querySelectorAll 和 .not()
【发布时间】：2018-09-16 16:10:10
【问题描述】：

<div class="alpha">
   <div class="beta">
      <label style="color:red; font-size: 12px;">Hello</label>
   </div>
</div>

我想排除（=不包括）上面的label。这包括它（测试成功）：

document.querySelectorAll(.alpha .beta label");

现在怎么排除呢？我想选择我所有的label class，但我想排除的只有一个label style。

【问题讨论】：

document.querySelectorAll("div:not(.alpha .beta label)"); 这没有意义，因为您说的是“选择 div，但不是标签”。 Label 一开始就不是 div，
您要做哪些元素？
您不能将复杂的选择器（即多个级别的“路径”）作为:not()的参数
不幸的是there is no css parent selector。似乎您想要其父母不按顺序包含.beta, .alpha 的标签。
@paros 如果我理解正确，您可以使用document.querySelectorAll("label[class]") - 这只会选择具有class 属性的标签。 Example

【解决方案1】：

您不能使用 CSS 选择器来匹配“所有labels，除了the one contained indiv.alpha div.beta”。但是，您对预期结果给出了另一种定义：

我想选择我所有的<label class=…>，但我想排除的只有一个<label style=…>。

document.querySelectorAll("label[class]:not([style])")

【讨论】：

“除 div.alpha div.beta 中包含的标签之外的所有标签”与父选择器无关，因为在这种情况下它不是祖先的目标。这是由于 label:not(.alpha .beta *) 在选择器 4 之前无效和受支持。请参阅 this answer 以及其中链接的那些。
@BoltClock 你是对的，这是一个更好的链接。但我认为 Selectors 4 仍然只允许复合选择器，而不是复杂的选择器？
几年前他们取消了这个限制。例如，该选择器将适用于 Safari。

【解决方案2】：

试试这个：

document.querySelectorAll("*:not(.div_label):not(.alpha):not(.beta)");

您不需要最后一个“标签”部分，因为标签不是 div（并且您要求选择 div，对吗？），所以无论如何它都不会被选中

【讨论】：