Применение CSS-фильтра для всех, кроме определенных подэлементов

Question

Мне нужен фильтр CSS для применения ко всем элементам в контейнере, за исключением конкретных. Быстрый пример, чтобы объяснить ситуацию:

<div class="container"> 
<img class="one" src="blah" /> 
<img class="two" src="blah" /> 
<img class="three" src="blah" /> 
</div> 

Тогда я подаю фильтры, как так:

.container { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
} 

Так контейнер имеет полутоновый фильтр, примененный к нему, и всем IMG в нем поседела. Тем не менее, я хочу, чтобы один из img не переключился на серый:

.two { 
-webkit-filter: grayscale(0); 
filter: grayscale(0); 
} 

Однако, это не работает. Фильтр контейнера, по-видимому, перекрывает фильтр содержащегося элемента. Любые идеи, как я могу обойти это? Есть ли простой способ, или мне нужно написать некоторый jQuery, чтобы посмотреть на все элементы, которые не являются «.two», и применять фильтр к ним, а не к контейнеру?

Обновление: Я забыл упомянуть о важном предостережении. Контейнер должен быть серого, из-за которого имеет свойство background-image, которое также должно быть серого. Этот маленький фрагмент является частью большего количества контейнеров, все из которых также идут в оттенках серого, я просто пытаюсь выяснить, есть ли способ получить исключение из правила для родителя, поскольку родитель должен иметь это правило как Что ж.

Answer 1

Согласно CSS specifity правилам -

Либо поставить .two после .container в CSS,

Или сделать более .two специфичностью, т.е. img.two

UPDATE

.container правило находится на div itse lf - не на изображениях. Таким образом, контейнер переходит в оттенки серого независимо от того, что вы скажете изображениям. Попробуйте изменить это на .container img, а затем попробуйте включить полученные ответы.

Answer 2

Использование :not исключить .two

Отрицание CSS псевдо-класс, а не: (X), является функциональной нотации принимает простой селектор X в качестве аргумента. Он соответствует элементу, который не представлен аргументом. X не должен содержать другого переключателя отрицания.

.container img:not(.two) { 
    -webkit-filter: grayscale(100%); 
    filter: grayscale(100%); 
} 

Answer 3

использование>, чтобы указать изображение, которое является дочерним .container использования: не указать, что вы не хотите, второго изображения серого

.container > img:not(.two) { 
 
    -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
}

<div class="container"> 
 
<img class="one" src="http://lorempixel.com/400/200" /> 
 
<img class="two" src="http://lorempixel.com/400/200" /> 
 
<img class="three" src="http://lorempixel.com/400/200" /> 
 
</div>

jsfiddle

.container > img:not(.two) { 
-webkit-filter: grayscale(100%); 
filter: grayscale(100%); 
}