本文讲解如何在 javascript 中精准控制样式作用范围，避免误操作（如遮罩层连同弹窗一起变暗），通过 dom 结构优化和元素隔离替代 css `:not()` 的逻辑，实现仅对背景内容应用滤镜效果。

在前端开发中，CSS :not() 伪类能轻松排除特定元素（例如 body :not(#mad) { filter: brightness(20%); }），但JavaScript 本身没有内置的 :not() 选择器执行器——它不解析或模拟 CSS 选择器逻辑来“反向应用样式”。因此，直接在 JS 中“使用 :not”是误解；真正可行且健壮的方案是：重构 DOM 结构，将需保护的元素（如弹窗）移出被样式影响的容器层级，从而天然规避样式穿透。

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

✅ 正确实践方式如下：

1. 结构隔离（推荐）：将页面主体内容包裹进一个独立容器（如
   ），而模态框（#mad）作为同级兄弟元素置于 下——这样对 #main-content 应用 filter 时，#mad 完全不受影响：

   <body>
     <!-- 主体内容（会被变暗） -->
     <div id="main-content">
       <nav>...</nav>
       <p id="sign_up_here" onclick="myfunc1()">SIGN UP HERE</p>
       <!-- 其他页面内容 -->
     </div>
   
     <!-- 模态框（独立于 main-content，不会被滤镜影响） -->
     <div id="mad" style="display: none; position: fixed; z-index: 1000; ...">
       <form>...</form>
     </div>
   </body>

   2. 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 元素脱离受影响的渲染流，才是解决此类问题的根本之道。