本文讲解如何在 javascript 中模拟 css 的 `:not()` 选择器行为，避免对弹窗表单等特定元素应用全局样式（如背景变暗），通过 dom 结构隔离与精准作用域控制实现优雅的模态框交互。
在前端开发中，我们常通过 body.style.filter = "brightness(20%)" 实现页面整体变暗以突出模态框（Modal）。但问题在于：该样式会无差别作用于整个 ，包括你希望保持明亮、可交互的弹窗本身——这正是原问题中表单也被“变暗”的根本原因。
CSS 中可通过 :not(#mad) 精确排除目标元素，例如：
body:not(#mad) { filter: brightness(20%); } /* ❌ 无效：body 和 #mad 是父子关系，不能这样写 */但注意：:not() 是伪类选择器，用于匹配元素本身，无法跨层级“排除子元素”。真正有效的方案是改变作用域——不给 body 加滤镜，而是给一个包裹主体内容的容器加滤镜，同时让模态框脱离该容器（即置于其外部、同级层级），从而自然“免疫”滤镜效果。
✅ 推荐结构优化（关键步骤）：
立即学习“Java免费学习笔记（深入）”；
将后端 Java 接口文档转换为前端 TypeScript 类型定义（interface / type）。输入：飞书文档、Spring Boot 接口文档、Swagger/OpenAPI、手写 API 文档等。输出：包含请求参数与响应结果的 .md 文件，含完整 JSDoc 注释。触发关键词：Java 转 TS、接口转换、生成前端类型、接口文档转 TypeScript、DTO/VO/BO 转 interface、后端文档转前端类型、生成接口类型、类型定义生成。
- 将原 内除模态框外的所有内容（导航栏、正文、按钮等）包裹进一个独立容器，例如 ；
- 将模态框
移至该容器之外，但仍保留在 内（同级）；- 在 JS 中仅对 #main-content 应用 filter，#mad 因不在其内部，完全不受影响。
✅ 修正后的 HTML 结构示例：
<body> <!-- 模态框置于 body 最顶层，与 main-content 平级 --> <div id="mad" style="display: none; position: fixed; z-index: 1000; ..."> <!-- 表单内容 --> </div> <!-- 主体内容容器（将被变暗） --> <div id="main-content"> <nav>...</nav> <p id="sign_up_here" onclick="myfunc1()">SIGN UP HERE</p> <!-- 其他页面内容 --> </div> </body>✅ 对应的 JavaScript（安全、精准）：
function myfunc1() { const mad = document.getElementById("mad"); const mainContent = document.getElementById("main-content"); // ✅ 只作用于主体容器 mad.style.display = "block"; mainContent.style.filter = "brightness(20%)"; mainContent.style.transition = "filter 0.3s ease"; // 建议添加平滑过渡 }⚠️ 注意事项：
- z-index 至关重要：确保 #mad 的 z-index（如 1000）显著高于 #main-content 及其子元素，避免被遮挡；
- 关闭逻辑需同步还原：添加关闭功能时，务必重置 mainContent.style.filter = ""；
- 无障碍与语义化：建议为模态框添加 role="dialog"、aria-modal="true"，并禁用背景内容的键盘焦点（使用 inert 属性或手动管理 tabindex）；
- 响应式兼容：若页面有滚动条，变暗后隐藏 main-content 可能导致布局抖动，可额外设置 body { overflow: hidden; }。
总结：JavaScript 本身没有内置 :not() 方法直接筛选“非某元素”，但通过合理的 DOM 结构设计 + 作用域收缩（对容器而非 body 操作），即可完美复现 CSS :not() 的视觉隔离效果。这是比尝试复杂 DOM 遍历或内联样式覆盖更健壮、可维护的工程实践。
- 将模态框
