先记住这个答案
filter 在 CSS 规范里明确标注为 inherited: no，子元素不会自动继承父元素的 filter 值。但视觉上子元素确实跟着变了，这不是继承，而是渲染流程决定的：浏览器先把父元素和所有子元素画到一块画布上，然后对整块画布做滤镜处理。子元素是画布的一部分，自然逃不掉。
filter不继承给子元素- 父级滤镜会处理子元素的最终画面
filter: none不能抵消父级滤镜- 想让子元素不受影响，只能把它移出父元素的 DOM 层级
继承属性和非继承属性的区别
CSS 里 color、font-size 这些属性是继承的。父元素设了 color: red，子元素没有单独设颜色时就会用 red，但子元素可以自己写 color: blue 来覆盖。
filter 不是这样。打开 DevTools 看子元素的 Computed 面板，filter 的值是 none——它确实没有继承父元素的 blur(5px)。子元素身上写 filter: none 也没有任何效果，因为它本来就是 none。
这就是问题的核心：子元素在样式计算层面完全不受影响，但在渲染层面被一起处理了。
/* 父元素加模糊，子元素设 filter: none 无效 */
.parent {
filter: blur(5px); /* 对整个渲染结果做模糊 */
}
.child {
filter: none; /* 没有用，子元素已经是 none 了 */
/* 子元素视觉上照样模糊 */
}
/* 想让子元素清晰，只能把它移出 .parent */浏览器的渲染顺序是：先 layout（算位置和大小），再 paint（画像素），最后 composite（合成）。filter 作用在 paint 之后，对整块区域做后处理。子元素在 paint 阶段已经画进去了，后处理时无法单独跳过它。
真正的豁免办法
既然子元素在 DOM 层级上属于父元素，就必然被一起处理。要想让某个元素不受父元素 filter 的影响，唯一可靠的办法是把它移出父元素的 DOM 树。
比如对话框、工具提示这类浮层，如果它们的 DOM 结构嵌在带 filter 的容器里，就会跟着变灰或模糊。解决方案是用 React Portal 或者手动把浮层的 DOM 挂到 <body> 下面，让它和带 filter 的容器在 DOM 上是兄弟而不是父子。
有人会想到用 position: fixed 来「跳出」父元素。但 filter 会改变 fixed 定位的包含块——带 filter 的父元素会变成 fixed 子元素的包含块，fixed 不再相对于视口定位。所以在有 filter 的父元素里用 fixed 豁免是行不通的。
和其他「看起来像继承」的属性对比
filter 这种「非继承但视觉上影响子元素」的行为并不是特例。opacity 也是非继承属性，但父元素设了 opacity: 0.5，子元素照样半透明。transform 也一样，父元素旋转了，子元素也跟着转。
这些属性有一个共同特征：它们都会创建新的层叠上下文。浏览器会把这个层叠上下文里的所有内容当作一个整体来做变换、滤镜或透明度处理。子元素没有办法从内部突破这个整体。
和真正的继承属性 color 对比：color 是在样式计算阶段传给子元素的，子元素可以覆盖；filter 是在渲染阶段作用于整个容器的，子元素没有覆盖入口。
容易答错的地方
- 说
filter是继承属性 - 规范写得很清楚：
filter的inherited值是no。子元素视觉上受影响不代表属性被继承了，答题时一定要区分「样式继承」和「渲染后处理」这两个概念。 - 以为在子元素上写
filter: none可以取消 - 子元素的
filter本来就是none，再写一遍none没有任何效果。这个操作的意思是「不要对子元素自己做滤镜」，而不是「不要让父元素的滤镜影响我」。
面试官还会怎么问？
opacity 也是非继承属性，子元素能覆盖它吗？
子元素可以设自己的 opacity，但效果是叠加的。父元素 opacity: 0.5，子元素 opacity: 0.5，视觉上子元素的透明度是 0.25（0.5 x 0.5）。子元素没办法让自己比父元素更不透明。
在 React 里怎么避免浮层被父元素的 filter 影响？
用 createPortal 把浮层渲染到 document.body 下面。这样浮层在 DOM 树上不是带 filter 容器的子节点，就不会被一起做后处理。很多组件库的 Modal、Tooltip 默认就这么做的。
backdrop-filter 和 filter 的作用对象有什么区别？
filter 作用于元素自身及其子元素的渲染结果。backdrop-filter 作用于元素背后的内容，不影响元素自身的内容。比如做毛玻璃效果用的就是 backdrop-filter: blur(10px)，元素自身的文字不会被模糊。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。