css体滤波器反转不适用于伪选择器[重复]

Question

这个问题在这里已有答案：

• Revert a filter invert() CSS rule 3回答

我试图使用css filter属性反转颜色。我在体内应用了filter:invert(100%)。我想过滤器属性不应该影响<img />元素。我在:not(img)中添加了css 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" />

Answer 1

你在descendant selector上缺少空间所以body:not(img)相当于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" />

---

更新：即使在以前的情况下，当有子元素时它会引起问题，所以最好将它应用于身体并应用图像，以便它将恢复。

.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>

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