将 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”的元素并将过滤器应用于它们，而不是容器？

更新：我忽略了一个重要的警告：容器必须是灰度的，因为它有一个背景图像属性也将变成灰色。这个小片段是更多容器的一部分，这些容器也都变成了灰度，我真的只是想弄清楚是否有办法对父级的规则进行压倒性的豁免，因为父级必须有规则作为好。

Answer 1

根据CSS 规范规则 -

要么把 放在css.two之后，.container

或者说得更.two具体一些，即img.two

更新

规则.container在于其div本身，而不在于图像。因此，无论您告诉图像做什么，容器都会变成灰度。尝试将其更改为.container img，然后尝试合并您收到的答案。