制作深色模式Chrome扩展：CSS滤镜排除指定元素问题

问题分析 #

你最初的代码无效，核心原因是选择器逻辑错误：html:not(img):not(video):not(.custom-class) 是选择本身不是img/video/.custom-class的html元素——而html元素本身永远不会是这些类型，因此滤镜会直接应用到html根节点上，所有子元素（包括你想排除的媒体和自定义类元素）都会继承这个滤镜，自然无法达到排除效果。

你后来用二次反转的临时方案存在色彩偏移，通常是因为部分元素自带透明背景、已有滤镜规则，或者浏览器渲染时的精度损耗导致的。

正确解决方案 #

方案1：根节点加滤镜，精准抵消目标元素的反转效果

优化二次反转的写法，确保覆盖所有需要排除的元素，同时减少色彩偏移：

/* 给整个页面应用深色模式滤镜，添加背景色避免透明区域异常 */
html {
  filter: invert(1) hue-rotate(180deg);
  background-color: #ffffff;
}

/* 对不需要反转的元素，用相同滤镜抵消效果 */
html img,
html video,
html picture,
html .fr-select-color,
html .bbMediaWrapper,
html .menu,
html .tooltip-content,
/* 覆盖嵌套元素，比如菜单内的图片 */
html .menu img,
html .tooltip-content img {
  filter: invert(1) hue-rotate(180deg);
}

如果仍有轻微色彩偏移，可以尝试添加brightness(1.02)微调，比如：

html img, ... {
  filter: invert(1) hue-rotate(180deg) brightness(1.02);
}

方案2：直接选择需要应用滤镜的元素（避免继承问题）

不依赖根节点滤镜的继承，直接选中所有非排除元素：

/* 选择body下所有元素，排除目标类型和类 */
body *:not(img):not(video):not(picture):not(.fr-select-color):not(.bbMediaWrapper):not(.menu):not(.tooltip-content) {
  filter: invert(1) hue-rotate(180deg);
}

/* 确保嵌套在排除类内的所有子元素都不应用滤镜 */
.menu *,
.tooltip-content * {
  filter: none !important;
}

这种方式需要确保:not()选择器覆盖所有需要排除的元素，!important用于强制覆盖可能存在的优先级冲突。

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