logo标签列表

想要使整个页面变成灰度，除了指定的div元素

cssselectorgrayscale
8
我有一段CSS代码可以将整个页面变为灰阶。
<style type="text/css">
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    filter: grayscale(100%);
}
</style>

我现在想要将一个iframe嵌入到一个不受影响的div中。我已经搜索了这个问题的解决方案，并发现了“:not”选择器。当我参考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)，但是所有元素都变成了灰度。

可能是重复的问题：如何使父级 div 的 webkit-filter 不影响子元素？ - Kaiido
2个回答
4

考虑选择器的权重，HTML是一种通用选择器，比更具体的选择器如类或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%);
}

我认为这将解决你的问题。
2
将过滤器应用于<body>的所有子元素，但排除指定类的元素，使用以下代码：
body :not(.class-to-not-filter) { filter }

这里有一个示例！

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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接