当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript实现CSS:not()选择器方法

JavaScript实现CSS:not()选择器方法

2026-02-06 16:06:54 0浏览收藏

哈喽！今天心血来潮给大家带来了《JavaScript 实现类似 CSS :not() 选择器方法》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

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

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

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

✅ 正确实践方式如下：

结构隔离（推荐）：将页面主体内容包裹进一个独立容器（如
），而模态框（#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>

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

今天关于《JavaScript实现CSS:not()选择器方法》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！