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来查看所有不是＆＃t;＃34; .two＆＃34;并将过滤器应用于它们，而不是容器？

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

Answer 1

使用＆gt;指定作为.container子元素的图像不使用：指定您不希望第二张图像变灰

＆＃13;

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

＆＃13;

<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>

＆＃13;

jsfiddle

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

Answer 2

根据CSS specifity规则 -

将.two放在css后的.container

或者使.two更具体，即img.two

<强>更新

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

Answer 3

使用:not排除(Exp:Sorry! You cannot include the intended website in Web Tab, as the intended website restricts its content from loading inside another website.)

否定CSS伪类，不是（X），是一个以简单的选择器X作为参数的功能表示法。它匹配一个未由参数表示的元素。 X不得包含另一个否定选择器。

.two

将CSS过滤器应用于除特定子元素之外的所有子元素

3 个答案: