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

Question

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

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

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

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

Answer 1

body :not(.childclass) * {   transform:none; }您试图在伪变量上选择通配符 (*)，这是不正确的。我将解释下面的代码：body :not(.childclass) *选择 body 标记内没有子类的任何项目内的所有项目。不需要在 :not false 之前添加通配符，但如果需要，您可以添加它，它会解释相同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。

Answer 2

vanilla JS 的解决方法之一是使用element.matches()方法。var  els = document.querySelectorAll('*');els.forEach((elem) => {    if(!elem.matches(".childclass *")){        elem.style.transform = 'none';    }});