使用CSS子选择器切换display值实现模态框隐藏其余内容的问题咨询

问题原因 #

1. 缺少带.fixed类的#myNav的可见样式：你默认给#myNav设置了display: none，但没有为添加了fixed类的导航设置显示规则，ID选择器优先级高于类选择器，因此即便加上fixed类，导航仍然处于隐藏状态。
2. 否定选择器的匹配条件冗余：你在:not()内加上了.fixed类限制，没有必要，反而可能因为匹配逻辑问题导致排除失效，你只需要按唯一ID排除目标元素即可。

修复方案 #

修改后的CSS代码如下：

#all-body {
    display: block;
}
#myNav {
    display: none;
}
/* 新增：导航加fixed类后显示 */
#myNav.fixed {
    display: block !important;
}

.fixed#all-body > :not(#myNav),
.fixed#all-body > :not(#myNav) * {
    display: none !important;
}

JavaScript部分可以优化变量声明避免重复赋值，功能不受影响：

function toggleMobileMenu() {
  const navElement = document.getElementById("myNav");
  navElement.classList.toggle("fixed");
  const bodyElement = document.getElementById("all-body");
  bodyElement.classList.toggle("fixed");
}

原理说明 #

修改后#myNav.fixed的规则优先级足够覆盖默认的隐藏样式，加上!important可以避免被父级的隐藏规则误伤，保证模态框正常显示。否定选择器直接按ID排除目标元素，逻辑更简洁准确，实现了body加fixed类后，仅保留#myNav可见，其余内容全部隐藏的效果。

内容的提问来源于stack exchange，提问作者Alexander