У меня есть код CSS, который может сделать всю страницу в оттенках серого.

<style type="text/css">
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>

Теперь я хочу встроить iframe в div, который не будет затронут. Я искал решение и источник: не селектор. Когда я ссылаюсь на 6.6.7 вhttp://www.w3.org/TR/css3-selectors/#negation Я думаю, что нашел решение, потому что оно может работать, даже если я поставил HTML в качестве моего селектора CSS

html|:not(x)

Поэтому я изменил код так же, как приведенный выше код, но ничего не изменилось. Я беспокоился о проблеме, вызванной дизайном моего сайта, поэтому я решил закодировать их в jsfiddle в самом простом HTML

<div id="abc" class="abc"><font color="red">This should be a normal text.</font></div>
<font color="red">This should be an affected text.</font>

В CSS

html|*:not(.abc) {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%); }

Ссылка на сайт:http://jsfiddle.net/4vxyqdye/1/ PS: в предыдущей версии я использовал: не только (.abc), но все элементы становятся оттенками серого.