我有一个带有-webkit-filter: grayscale(100%)
内部我需要div.anternative才能没有灰度。我试图将-webkit-filter: grayscale(0)添加到此DIV，但没有任何改变。
如果我添加到身体font-size: 16px，然后添加到Div font-size: 20px，则DIV内部的文本为20px。为什么此原理不适用于过滤器？
我的代码：
html
<body class="different classes here" style="-webkit-filter: grayscale(100%); background-attachment: scroll;"> ...
<div class="an-alternative"> ... </div>
</body>
css
body .an-alternative {
margin-left: 240px;
-webkit-filter: none;
filter: none;
background-color: red;
}
这是简单的jsfiddle示例，它也无法正常工作-https：//jsfiddle.net/28yovw0k/1/
我最近遇到了一个类似的问题。我的回答中有两件事要注意，您要覆盖的元素需要更高的CSS特异性，以及在此处将过滤器属性应用于所有儿童divs。因此，正如Paulie_D所说，您不能覆盖父母的过滤器。但是，此解决方案确实使您可以"删除"灰色过滤器。
.gray div {
width: 100px;
filter: grayscale(0.8);
height: 100px;
}
.gray .red {
background: red;
filter: grayscale(0);
}
.blue {
background: blue;
}
.green {
background: green;
}