<分区>
我正在尝试使用 css 反转颜色 filter属性(property)。我申请了filter:invert(100%)体内。我希望过滤器属性不应该影响 <img />元素。我添加了 css :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" />最佳答案
您在 descendant selector 上缺少空间所以 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" />更新:即使在以前的情况下，当有子元素时它也会引起问题，所以最好将它应用于 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>或者您必须专门对元素应用过滤器而不是通配符选择。
关于html - css body filter invert不适用于伪选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55274845/