如何在 JavaScript 中实现 CSS :not() 选择器的等效效果

本文讲解如何在 javascript 中模拟 css 的 `:not()` 选择器行为，避免对弹窗表单等特定元素应用全局样式（如背景变暗），通过 dom 结构隔离与精准作用域控制实现优雅的模态框交互。

在前端开发中，我们常通过 body.style.Filter = “brightness(20%)” 实现页面整体变暗以突出模态框（Modal）。但问题在于：该样式会无差别作用于整个 ，包括你希望保持明亮、可交互的弹窗本身——这正是原问题中表单也被“变暗”的根本原因。

css 中可通过 :not(#mad) 精确排除目标元素，例如：

body:not(#mad) { filter: brightness(20%); } /* ❌ 无效：body 和 #mad 是父子关系，不能这样写 */

但注意：:not() 是伪类选择器，用于匹配元素本身，无法跨层级“排除子元素”。真正有效的方案是改变作用域——不给 body 加滤镜，而是给一个包裹主体内容的容器加滤镜，同时让模态框脱离该容器（即置于其外部、同级层级），从而自然“免疫”滤镜效果。

✅ 推荐结构优化（关键步骤）：

立即学习“Java免费学习笔记（深入）”；

1. 将原 内除模态框外的所有内容（导航栏、正文、按钮等）包裹进一个独立容器，例如
   ；

2. 将模态框
   移至该容器之外，但仍保留在 内（同级）；

3. 在 js 中仅对 #main-content 应用 filter，#mad 因不在其内部，完全不受影响。

✅ 修正后的 html 结构示例：

      
        
       
          
SIGN UP HERE
        
 

✅ 对应的 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 遍历或内联样式覆盖更健壮、可维护的工程实践。