优雅地保留图片原色，实现CSS全局网站置灰
许多场景下，我们需要将网站整体调成灰色，例如表达哀悼或营造特定氛围。 简单的css代码html { filter: grayscale(100%); }即可实现全局置灰。但如果需要图片保持原色，该如何操作呢？直接在图片上使用filter: none;或尝试:not(img)选择器往往效果不佳。
许多开发者尝试过在元素上应用filter: grayscale(100%)，然后尝试html:not(img)、img { filter: none; }以及逐个列举特定元素应用filter等方法，但都未能成功只对非图片元素进行灰度处理。这是因为CSS选择器的局限性和filter属性的继承机制。简单的否定选择器:not(img)无法有效排除嵌套在其他元素内的图片。
解决方法的关键在于利用:has()伪类选择器。:has()选择器可以根据元素是否包含特定子元素进行选择。结合:not()选择器，我们可以精确选中不包含图片的元素，并应用灰度滤镜。
有效的解决方案如下：
:not(:has(img)):not(img) {
filter: grayscale(1);
}
这段代码首先使用:not(:has(img))选择器，选中所有不包含
立即学习“前端免费学习笔记（深入）”；
