多个：not（）的CSS所有选择器问题[关闭]答案

【问题标题】：CSS everything selector problem with multiple :not() [closed]多个：not（）的CSS所有选择器问题[关闭]
【发布时间】：2020-12-27 20:15:03
【问题描述】：

自从我开始使用带有多个 [:not()] 的 CSS 一切选择器 [*] 以来，我遇到了一个问题。

我尝试过以下示例不起作用：

.post-body *:not(.has-color):not(.has-bg){
     color: red
}

.post-body *:not(.has-color)*:not(.has-bg){
     color: red
}

.post-body *:not(.has-color .has-bg){
     color: red
}

.post-body *:not(.has-color , .has-bg){
     color: red
}

想象一下类似 WordPress 的帖子内容；我无法更改内容的整个结构，但我确实需要为没有特定背景或文本颜色的文本设置原色。所以我试图将红色设置为除包含“.has-color”或“.has-bg”的元素之外的任何元素，即它们之间没有关系。

有人解决了这个问题，甚至看起来像这样吗？

【问题讨论】：

一些 HTML 标记会有所帮助...您是否要排除具有 .has-color 和 .has-bg 的内容？ .has-color 或 .has-bg?具有.has-bg 并且是.has-color 的子元素的元素？ --- 澄清。
@LouysPatriceBessette 嗨，我的朋友，想象一下像 WordPress 的帖子内容；我无法更改内容的整个结构，但我确实需要为没有特定背景或文本颜色的文本设置原色。所以我试图将红色设置为除包含“.has-color”或“.has-bg”的元素之外的任何元素，即它们之间没有关系。
那可能是.post-body *:not(.has-color), .post-body *:not(.has-bg){ color: red }
@LouysPatriceBessette 我也试过了，但这只是覆盖，不适合我的目的。
ok...我刚刚在documentation 中发现.not() 可以处理OR 运算符||...（实验！？！）。试试：.post-body *:not(.has-color || .has-bg){ color: red }

【解决方案1】：

您的第一个示例应该可以工作，如 this CodePen 所示，但正如 Louys 所说，没有任何标记很难分辨。

.post-body *:not(.has-color):not(.has-bg) {
  color: red;
}

【讨论】：

问题在于：“.has-color”本身有一个“强”标签
我明白了。那么也许您可以使用以下属性来确保 .has-color 和 .has-bg 的子级保留继承的颜色。 CodePen 已更新为演示版。 .post-body *:not(.has-color):not(.has-bg) { color: red; } .post-body .has-color *:not(.has-color):not(.has-bg), .post-body .has-bg *:not(.has-color):not(.has-bg) { color: inherit; }