css 主体过滤器反转不适用于伪选择器

Question

我正在尝试使用 css filter 属性反转颜色。我在正文中应用了 filter:invert(100%)。我希望过滤器属性不应该影响 <img /> 元素。我在body中添加了css:not(img)。但是，它不会起作用。

.aaa {
  width: 100px;
  height: 100px;
  background: #00a3fe;
  margin: 5px
}
body:not(img) {
  filter: invert(90%)
}

<div class="aaa">

</div><div class="aaa">

</div>

<img src="http://pngimg.com/uploads/birds/birds_PNG115.png" />

Answer 1

您在 descendant selector 上缺少 space，因此 body:not(img) 等同于 body，它正在申请 body 标签本身。

.aaa {
  width: 100px;
  height: 100px;
  background: #00a3fe;
  margin: 5px
}
body :not(img) {
/*--^^^----*/
  filter: invert(90%)
}

<div class="aaa">

</div><div class="aaa">

</div>

<img src="http://pngimg.com/uploads/birds/birds_PNG115.png" />

更新： 即使在以前的情况下，当有 children 元素时也会导致问题，因此最好将其应用于 body 并应用图片也是如此，所以它会恢复原状。

.aaa {
  width: 100px;
  height: 100px;
  background: #00a3fe;
  margin: 5px
}

body {
  filter: invert(90%)
}

body img {
  filter: invert(90%)
}

<div class="aaa">

</div>
<div class="aaa">

</div>
<div>
  <img src="http://pngimg.com/uploads/birds/birds_PNG115.png" />
</div>

或者您必须将过滤器专门应用于元素而不是通配符选择。

css body filter invert not working for pseudo selector