Инвертирование фильтра тела css не работает для псевдоселектора

Я пытаюсь инвертировать цвета, используя свойство css filter. Я применил 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" />


html css css-selectors pseudo-element css-filters
person Karuppiah RK    schedule 21.03.2019    source источник
comment
body:not(img) { =› body :not(img) { ... нужно поставить пробел   -  person Pranav C Balan    schedule 21.03.2019

Ответы (1)


arrow_upward
2
arrow_downward

Вам не хватает места в селекторе потомков, поэтому 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>

Или вам нужно применить фильтр конкретно к элементу вместо выбора подстановочного знака.

person Pranav C Balan    schedule 21.03.2019
comment
Вот, в этом простом случае это работает. Но в больших файлах/проектах это не работает body :not(img) - person Karuppiah RK; 21.03.2019
comment
@KaruppiahRK может быть родительским элементом, к которому применяется стиль - person Pranav C Balan; 21.03.2019
comment
В таком случае, каково решение? - person Karuppiah RK; 21.03.2019
comment
@KaruppiahRK : подайте заявку дважды, чтобы вернуться ..... проверьте обновление - person Pranav C Balan; 21.03.2019
comment
который применяет filter дважды на самом деле... @KaruppiahRK применяет filter конкретно к нужным вам элементам, если вы применяете его к родительскому элементу, он применяется к < i>дочерние элементы тоже... - person kukkuz; 21.03.2019
comment
@kukkuz Нет, я хочу применить его к родительскому элементу. В моем случае это единственный возможный способ добиться этого. У меня более 10000 классов css. Таким образом, очень сложно указать фильтр для конкретных элементов. - person Karuppiah RK; 21.03.2019
comment
Фильтр @KaruppiahRK подобен непрозрачности, если он применяется к родительскому элементу, вы не можете отменить его для дочернего элемента. Повторное применение фильтра не даст исходного результата. - person Temani Afif; 21.03.2019