使用CSS filter:invert()实现网页整体反色时排除指定按钮不生效

问题原因 #

你之前的写法不生效有两个核心原因：

1. CSS的filter属性是作用于整个元素的渲染结果，你把反色滤镜加在html根元素上，相当于给整个页面的最终渲染结果叠加了一层统一的反色效果，和子元素的选择器没有关系。
2. html:not(.background-yellow-button)这个选择器的逻辑本身是错误的：:not()筛选的是当前匹配的元素（此处是html根元素）中不符合括号内规则的对象，而html元素本身不可能携带.background-yellow-button类，所以这个选择器依然会100%匹配html元素，和你最初的全局反色写法没有任何区别。

解决方案 #

直接给需要排除的按钮再加一层同样的反色规则即可，两次反色会互相抵消效果，刚好还原按钮原本的样式，同时不会影响其他元素的反色逻辑。

你只需要在原有.background-yellow-button的样式中新增以下几行代码即可：

.background-yellow-button {
  /* 此处保留你原有的按钮样式，新增下方4行代码 */
  filter: invert(var(--invertColors));
  -moz-filter: invert(var(--invertColors));
  -o-filter: invert(var(--invertColors));
  -ms-filter: invert(var(--invertColors));
}

该方案逻辑完全适配你的原有变量设置：

• 当--invertColors值为1时，根元素反色1次，按钮自身再反色1次，最终效果等于没有反色
• 当--invertColors值为0时，两层反色都不生效，按钮保持原有样式

如果你的按钮本身已经设置了其他filter效果，只需要把反色规则和原有规则合并即可，比如原有规则是filter: opacity(0.9);，修改为filter: opacity(0.9) invert(var(--invertColors));即可正常生效。

内容的提问来源于stack exchange，提问作者Mateusz Kusmierz