本文详解为何直接对父元素添加 `.blur-filter-on` 类无法单独取消其内部 `` 的模糊效果，并提供基于 `> *` 子选择器的可靠解决方案，确保仅目标文本解除模糊，其余内容保持视觉遮罩。
在实际开发中，我们常希望通过 JavaScript 动态切换 CSS 类来实现局部视觉反馈（如“提示显示”时解除某段文字的模糊效果）。但一个常见误区是：将 filter: blur(...) 直接应用在包含多个子元素的容器上，再试图仅通过操作某个子元素的类名来覆盖该模糊效果——这在 CSS 中是无效的。
原因在于：CSS 的 filter 属性具有继承性渲染特性——它作用于整个渲染盒（rendering box），且不会被子元素上的 filter: none 或 filter: blur(0) 覆盖或穿透。换言之：即使你给 单独添加 .blur-filter-off，只要它的父级 本身设置了 filter: blur(0.35em)，那么该父级的模糊效果会“笼罩”所有后代内容，子元素自身的 filter 声明无法突破这一层渲染隔离。
✅ 正确解法：将模糊效果施加于父容器的直系子元素，而非父容器自身。
通过 CSS 子选择器 > *，我们可以精确控制“哪些子节点需要模糊”，从而让 JavaScript 对特定子节点（如 #hint-ru）添加/移除 .blur-filter-off 时真正生效：
/* 关键修正：不再对 .blur-filter-on 本身设 filter，
而是对它的所有直接子元素应用模糊 */
.blur-filter-on > * {
filter: blur(0.35em);
}
/* 保留原有动画类定义 */
.blur-filter-off {
animation-name: blur-decrease;
animation-timing-function: ease;
animation-duration: 1s;
filter: blur(0) !important; /* 确保优先级足够高 */
}
@keyframes blur-decrease {
from { filter: blur(0.35em); }
to { filter: blur(0); }
}对应 HTML 需重构为语义清晰的嵌套结构，确保每个文本片段均为 .blur-filter-on 的直接子元素：
<div class="quote">
<span class="blur-filter-on">
<span>“</span>
<span id="hint-ru">This is</span>
<span> the example of text”</span>
</span>
</div>
<div class="quote-en">
<span class="blur-filter-on">
<span>“</span>
<span id="hint-en">Das ist</span>
<span> the example of text”</span>
</span>
</div>
<a class="hint-button" href="#" onclick="showHint('hint-ru', 'hint-en')">HINT</a>JavaScript 逻辑无需修改，仍保持简洁与健壮性：
立即学习“前端免费学习笔记（深入）”；
function showHint(hintRuId, hintEnId) {
const hintRu = document.getElementById(hintRuId);
const hintEn = document.getElementById(hintEnId);
if (hintRu) hintRu.classList.toggle("blur-filter-off");
if (hintEn) hintEn.classList.toggle("blur-filter-off");
}⚠️ 注意事项：
- 避免使用 !important 过度，但在此场景下为确保 blur(0) 能覆盖 > * 继承的模糊值，显式声明是合理且必要的；
- 若后续需支持更复杂嵌套（如内联 或 ），建议统一用 包裹纯文本片段，维持 > * 选择器的可控性；
- 动画 @keyframes 仅作用于拥有 .blur-filter-off 的元素，因此只有被点击激活的提示文本才会执行平滑去模糊动画，体验更精准。
总结：CSS 滤镜不是传统样式属性，它作用于渲染层。要实现“局部解除模糊”，核心思路不是“覆盖父级滤镜”，而是“精细化控制滤镜作用域”。采用 > * 子选择器 + 结构化 HTML + 精准类名切换，即可优雅、可维护地达成目标效果。
