本文讲解如何在 javascript 中精准控制样式作用范围，避免误操作（如遮罩层连同弹窗一起变暗），通过 dom 结构优化和元素隔离替代 css `:not()` 的逻辑，实现仅对背景内容应用滤镜效果。
在前端开发中，CSS :not() 伪类能轻松排除特定元素（例如 body :not(#mad) { filter: brightness(20%); }），但JavaScript 本身没有内置的 :not() 选择器执行器——它不解析或模拟 CSS 选择器逻辑来“反向应用样式”。因此，直接在 JS 中“使用 :not”是误解；真正可行且健壮的方案是：重构 DOM 结构，将需保护的元素（如弹窗）移出被样式影响的容器层级，从而天然规避样式穿透。
✅ 正确实践方式如下：
-
结构隔离（推荐）：将页面主体内容包裹进一个独立容器（如 ），而模态框（#mad）作为同级兄弟元素置于 下——这样对 #main-content 应用 filter 时，#mad 完全不受影响：
SIGN UP HERE
-
JS 逻辑更新（只作用于目标容器）：
function myfunc1() { const mad = document.getElementById("mad"); const mainContent = document.getElementById("main-content"); // ✅ 精准控制目标
mad.style.display = "block"; mainContent.style.filter = "brightness(20%)"; // 仅影响 #main-content 内部 }
⚠️ 注意事项： - 不要对 `document.body` 直接设 `filter`，因为 `body` 是 `#mad` 的祖先节点，滤镜会**继承并作用于所有后代**（包括 `#mad`），这是问题根源； - `z-index` 需确保 `#mad` 足够高（如 `1000`），避免被其他元素遮挡； - 关闭弹窗时，记得恢复 `mainContent.style.filter = ""`，避免残留样式； - 进阶可配合 `transition` 实现平滑明暗变化，提升用户体验。 总结：JavaScript 中不存在“调用 `:not()`”的方法，但通过**语义化 DOM 结构 + 精确元素定位**，比任何 CSS hack 更可靠、更易维护。结构即逻辑——让需要隔离的 UI 元素脱离受影响的渲染流，才是解决此类问题的根本之道。
-
JS 逻辑更新（只作用于目标容器）：
