Chrome自定义CSS :not(img)规则部分页面失效 图片/图标显示异常

所有显示异常是两个问题共同导致的：

• 对无前置限定的:not()选择器匹配逻辑存在根本性误解。裸写:not(img)、:not(xxx)这类选择器等价于*:not(img)，会匹配DOM树中所有不符合括号条件的节点——不止是你想要修改的可见页面内容，还包括<html>根节点、<head>下的<script>/<style>等隐藏节点、浏览器生成的Shadow DOM匿名容器、以及img元素的所有父级/祖先容器。你给这些节点全部强制加上不透明黑色背景后，按照CSS层叠绘制规则，后代元素的不透明背景会绘制在祖先元素的背景图上层，直接把NASA首页这类挂载在父容器上的背景图完全遮挡；哪怕你单独给img设了透明背景，透明PNG格式的图标外层父容器被刷上黑底，最终显示效果就是纯黑色块。
• 触发了Chromium Blink引擎的已知渲染bug（对应你提到的issue #1335663）：当全局给包括隐藏节点、独立合成层节点在内的所有元素设置带!important标记的不透明背景色时，引擎的合成层计算逻辑会出错，要么把内容层误判到背景层下方直接覆盖导致整页空白，要么在动态内容重绘时出现内容短暂闪现后消失的问题。该问题是Blink引擎独有，因此同一段代码在Firefox的Gecko引擎下可正常运行。

你最初用通配符*的版本之所以99%场景能正常显示，是因为虽然也给所有元素加了黑底，但没有触发合成层计算bug，只是会把所有页面背景图全部覆盖，和你想保留背景图的需求冲突。

彻底放弃链式:not()排除的写法，从选择器范围、规则粒度两个层面重构CSS，不要用全局通配/全局否定选择器批量刷不透明背景：

1. 仅给最底层的根节点设置全局黑底，从根源避免多层不透明背景叠加遮挡内容：

html, body {
    background: #000 !important;
    color: #fff !important;
}

2. 限定文本样式规则仅作用于body下的可见内容节点，不碰head下的隐藏节点，默认给所有节点透明背景，避免覆盖父级挂载的背景图：

body * {
    color: #fff !important;
    background-color: transparent !important;
}

3. 单独给需要深色背景的表单控件、代码块等组件设置不透明背景，不再靠排除法筛选元素：

input, select, textarea, button, form {
    background-color: #213 !important;
    color: #fff !important;
}
pre, code, blockquote {
    background-color: #1a1a1a !important;
}

4. 单独豁免所有媒体元素，保证图片、视频、嵌入内容正常显示：

img, video, svg, canvas, picture, iframe, embed, object {
    background-color: transparent !important;
    opacity: 1 !important;
}

5. 保留原有的链接样式即可，注意修正语法错误：!important关键字前不要加多余空格，否则会导致样式失效：

a { color: #AEC !important; }
a:visited { color: #A9E !important; }
a:hover { color: #F0F !important; }

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