CSS 过滤器似乎不遵循与其他 CSS 属性相同的规则，包括覆盖和应用顺序。
首先，它们只能被后代元素中的过滤器重叠，而不能被覆盖（替换）。其次，改变 CSS 规则的特殊性似乎并没有改变这些过滤器的应用顺序。这就是我现在正在处理的问题。
正如在此JS Bin中所示，亮度滤镜在反转滤镜之前应用，导致与我需要的效果相反。我需要首先将反转滤镜应用于祖先，然后将亮度滤镜应用于特定的后代。
我提出的唯一解决方案涉及使用 :not() 从祖先过滤器中排除后代，使我能够对后代应用单独的（非重叠）过滤器。然而，这导致我们的单页面应用程序（单个大 DOM）的性能非常差。
关于如何在这种情况下首先应用反转过滤器或其他解决方案有什么想法吗？
*请注意，我需要过滤器来完成这项工作，而不是手动将特定颜色应用于后代元素，因为我实际上正在过滤彩色图像。为了简单起见，我在 JS Bin 中使用了文本。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
body {
-webkit-filter: invert(100%);
}
.normal {
background: white;
}
.brighter {
background: white;
-webkit-filter: brightness(200%);
}
</style>
</head>
<body>
<div class="normal">normal night mode text</div>
<div class="brighter">brighter night mode text</div>
</body>
</html>