Question

我有一个css代码，可以使整个页面为灰度。

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

我现在想在不受影响的div中嵌入iframe。我搜索了解决方案和fount：not selector。当我在http://www.w3.org/TR/css3-selectors/#negation参考6.6.7时，我认为我找到了解决方案，因为即使我把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：在之前的版本中，我使用了：not（.abc），但所有元素都变成了灰度。

Answer 1

考虑到选择器的权重，html是一般选择器，比特定选择器（如clases或ID）更重，如果您执行以下操作：

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

html .class-you-wanna-exlude {
   -webkit-filter: grayscale(0%);
   -moz-filter: grayscale(0%);
   filter: grayscale(0%);
}

我认为这将解决您的问题。

Answer 2

将过滤器应用于<body>的所有子项，不包括指定的类，使用：
body :not(.class-to-not-filter) { filter }

Have an example!

CSS

body :not(.exclude) {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}

.exclude {
    background: yellow;
    height: 100px;
}

.gray {
    background: purple;
    height: 100px;
}

HTML

<div class="exclude"></div> 
<div class="gray"></div>

想要将整个页面设置为灰度，除了特定的div

2 个答案: