我需要一个CSS过滤器来应用于容器中的所有元素,除了特定的元素.快速举例说明情况:
然后我应用过滤器如下:
.container {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
因此容器应用了灰度过滤器,并且其中的所有img都变为灰色.但是,我希望其中一个img不要变成灰色:
.two {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
但是,这不起作用.容器的过滤器似乎覆盖了所包含元素的过滤器.
我有什么想法可以解决这个问题吗?有一个简单的方法,或者我是否必须编写一些jQuery来查看所有不是“.two”的元素并将过滤器应用于它们而不是容器?
更新:我忽略了一个重要的警告:容器必须是灰度,因为它具有背景图像属性,也将变为灰色.这个小片段是更多容器的一部分,这些容器也都是灰度级的,我只是想弄清楚是否有一种方法可以对父级规则进行压倒一切的豁免,因为父级必须将规则作为好.