如何用CSS为非图片元素设置样式？现有写法无效求解决

问题原因 #

你写的body:not(img)逻辑有误——这个选择器是选中本身不是<img>的<body>元素，而<body>本来就不是图片标签，相当于给整个<body>加了灰度滤镜。由于CSS滤镜会继承，页面里的所有元素（包括图片）都会跟着变灰，自然达不到“只让非图片元素变灰”的效果。

两种正确实现方式 #

方式1：先全局加灰度，再重置图片的滤镜

这是最简洁的方案，先给整个<body>应用灰度，再让图片元素跳过这个滤镜：

body {
  filter: grayscale(1);
}

img {
  /* 重置灰度滤镜，用none覆盖继承的效果 */
  filter: none;
}

优势：代码简洁、逻辑清晰，不管页面结构多复杂，图片都会正常显示原色。如果还有其他不想加灰度的元素（比如<video>、<svg>），直接在选择器里补充即可，比如img, video, svg { filter: none; }。

方式2：直接选中所有非图片的后代元素

如果不想给<body>加滤镜，而是精准选中所有非图片的元素，可以用后代选择器配合:not()：

body *:not(img) {
  filter: grayscale(1);
}

解释：body *选中<body>下的所有后代元素，:not(img)排除掉其中的<img>标签。哪怕图片嵌套在其他元素里，这个写法也能正确排除目标元素。

额外提醒 #

如果元素本身已有其他滤镜样式，记得用filter: grayscale(1) 原有滤镜;的方式叠加，不要直接覆盖原有的滤镜效果。

内容的提问来源于stack exchange，提问作者antoine