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

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';

    }

});