Question

我正在尝试使用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，它是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>

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

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

1 个答案: