元素单独移除 CSS 模糊效果
" />
javascript 无法直接对父元素上设置的 `filter`（如 `blur`）进行局部取消，因为 `filter` 是继承性作用于整个渲染盒及其子树的；必须将需独立控制的文本包裹在独立容器中，并通过 css 选择器精准作用于子元素。
在您的原始代码中，.blur-filter-on 类被应用在外层 <span> 容器上（例如 <span class="blur-filter-on">“<span id="hint-ru">This is</span> ...”</span>），此时 filter: blur(0.35em) 会作用于整个容器及其所有后代内容——包括内部的 <span id="hint-ru">。即使您后续为 #hint-ru 添加 .blur-filter-off，它无法覆盖父级 filter 的叠加效果，因为 CSS filter 不支持“局部取消”，且 filter 属性不具有层叠穿透能力（即子元素不能通过自身 filter: none 或 blur(0) 来抵消父级的模糊）。
✅ 正确解法：将模糊效果施加于子元素，而非父容器
通过重构 HTML 结构，把每个可独立控制的文本片段（引号、提示词、剩余文本）分别包裹在 <span> 中，并利用 CSS 子选择器 > 精准控制：
<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>配合以下关键 CSS 规则：
/* 对 .blur-filter-on 下的所有直接子元素应用模糊 */
.blur-filter-on > * {
filter: blur(0.35em);
}
/* 移除特定子元素的模糊（注意：这里依赖其自身无 filter 继承） */
.blur-filter-off {
filter: blur(0) !important;
animation: blur-decrease 1s ease;
}此时，当 showHint() 执行 hintRu.classList.toggle("blur-filter-off")，它只影响 <span id="hint-ru"> 自身的 filter 值，而不会被外层 .blur-filter-on > * 的规则覆盖（因为 blur-filter-off 的 filter: blur(0) 优先级更高，且作用于同一元素）。
⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 避免在父元素上直接设 filter 后试图用子元素“反向清除”——这是 CSS 渲染机制决定的不可行路径；
- 动画 @keyframes blur-decrease 仍有效，但需确保 .blur-filter-off 类明确设置了 filter: blur(0)（含 !important 更稳妥）；
- 若使用 classList.toggle()，请确认初始状态一致（例如 #hint-ru 初始不应有 blur-filter-off）；
- 替代方案：也可改用 visibility: hidden / opacity + pointer-events 实现视觉切换，但本例中 filter 动画更符合设计意图。
最终，结构化分治 + 精准 CSS 作用域，是解决此类“局部滤镜控制”问题的核心思路。
