巧妙运用CSS，让网站整体置灰的同时完美保留图片色彩！
许多开发者在网站整体置灰时，常常面临一个挑战：如何避免图片也变灰？本文将提供一种精准有效的CSS解决方案，轻松解决这一难题。
您可能尝试过html { filter: grayscale(100%); }，或者html:not(img) { filter: grayscale(100%); } img { filter: none; }等方法，但这些方法都存在局限性。直接使用html选择器会影响所有元素，包括图片；而:not(img)选择器无法处理图片嵌套在其他元素的情况，导致图片仍然受灰度滤镜影响。 逐个元素添加filter: grayscale(100%);则工作量巨大且难以保证全面覆盖。
问题的关键在于CSS选择器的优先级和作用范围。 我们需要更精准地定位目标元素。
立即学习“前端免费学习笔记（深入）”；
高效的解决方案：
:not(:has(img)):not(img) {
filter: grayscale(1);
}
这段代码使用了:not(:has(img))选择器，它选择所有不包含:not(img)，确保所有不包含图片的元素以及图片本身都被排除在灰度滤镜之外。filter: grayscale(1);与filter: grayscale(100%);效果相同，只是简写形式。 通过此方法，您可以轻松实现网站内容置灰，图片色彩保持不变的效果。
