如何选择除某些元素的子树中的元素之外的所有元素？答案

【问题标题】：How to select all elements except those in subtrees of certain elements?如何选择除某些元素的子树中的元素之外的所有元素？
【发布时间】：2020-03-19 08:10:42
【问题描述】：

我想匹配 HTML 中的所有元素，除了那些在某些元素中的元素。

似乎 CSS3 不支持这样的选择器：

body *:not(.childclass *){
  transform:none;
}

有什么简单的解决方法吗？

【问题讨论】：

请分享一个基本的标记结构并解释你需要（不）匹配什么。

标签： html css css-selectors

【解决方案1】：

body :not(.childclass) * {
  transform:none;
}

您试图在伪上选择通配符 (*)，这是不正确的。我将解释下面的代码：

body :not(.childclass) *

选择body标签内没有子类的任何项目内的所有项目。

不需要在 :not 伪之前添加通配符，但您可以根据需要添加它，它会解释相同

body :not(.childclass) *

比

body *:not(.childclass) *

由于body和:not之间有一个空格，它将解释为body标签内的所有:not匹配元素。

其实你不需要选择器上的body标签：

:not(.childclass) *

将匹配标签内没有子类的所有元素。

但这里有一个解决方法。如果您在匹配元素中有一个子类，它将被选中，因为您也使用通配符选择它，因为非子类元素内的元素在子类元素内的非子类元素内是真正的匹配。

见：

https://jsfiddle.net/5nw6k3jL/

您需要为其指定级别，例如，对于两级匹配元素：

:not(.childclass) :not(.childclass) * {  }

这将匹配所有不在子类中的元素在没有子类的元素中。

你也可以连续设置多个级别：

  :not(.childclass), :not(.childclass) :not(.childclass) * {  }

这对两者都有好处，因为最新的优先级更高。

如果你不知道布局内的标签级别，你可以在一行或周围设置一堆选择器 JavaScript。

【讨论】：

这应该是一条评论，因为它没有回答问题
它应该和它一样回答，因为它回答了问题，这是正确选择所有非给定类的子元素的正确方法。另一方面，在选择器的乞求时不需要 body 标签来达到预期的效果，但在速度方面可能会很好地设置父级尽可能接近。

【解决方案2】：

vanilla JS 的一种解决方法是使用element.matches() 方法。

var  els = document.querySelectorAll('*');
els.forEach((elem) => {
    if(!elem.matches(".childclass *")){
        elem.style.transform = 'none';
    }

});

【讨论】：