我有一个模态，当打开时，它会使除自身之外的所有内容都通过display-none消失。或者，至少，这是我希望它做的，但它没有。我对子选择器了解不多，但我认为这应该有效，因为.fixed#myNav是.fixed#all-body的直接子级。有人知道可能出了什么问题吗？
#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed#all-body >:not(.fixed#myNav),
.fixed#all-body >:not(.fixed#myNav) * {
display: none !important;
}
<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
<!-- Other menu content-->
</div>
<!-- Other page content-->
</body>
function toggleMobileMenu() {
var element = document.getElementById("myNav");
element.classList.toggle("fixed");
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}
如果有人想知道更多的上下文：当单击打开模态的按钮时，.fixed类将添加到#all-body和#myNav中，我希望它们各自的display值进行切换。但是，由于#myNav是#all-body的子级，因此这不起作用。我希望使用上面的代码来基本上说"；除了CCD_ 10之外的所有内容都处于CCD_">
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("fixed");
}#all-body {
display: block;
}
#myNav {
display: none;
}
.fixed #myNav{
display:block;
}
.fixed#all-body >:not(#myNav) {
display: none !important;
}<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button>
menu
</div>
<p>page content</p>
</body>固定类仅为正文设置。
添加了显示：当.fixed为父级时，导航块。
内容应该包装在标签中，这样才能工作。
我发现，如果只引入一个类showMenu，而不是尝试使用fixed两次，那么就更容易理解发生了什么。
这个代码段的作用是在主体上切换showMenu。它还确保页面上的"其他内容"被包装在一个元素中，这样当showMenu类被添加到主体中时，它也可以做出响应。
然后，它执行您基本上正在执行的操作，在设置showMenu类时，将body的所有子元素设置为不显示，然后将菜单设置为阻止，使其单独显示。
function toggleMobileMenu() {
var element = document.getElementById("all-body");
element.classList.toggle("showMenu");
}#myNav {
display: none;
}
/* stop showing every element below body (but not body itself) */
.showMenu>:not(#myNav) {
display: none;
}
/* override the above setting for just the menu */
.showMenu #myNav {
display: block;
}<body id="all-body">
<div class="site-header">
<button onclick="toggleMobileMenu()">Open menu</button>
<!-- Other header content-->
</div>
<div id="myNav">
<button onclick="toggleMobileMenu()">Close menu</button> Other menu content
</div>
<div>
Other page content
</div>如果不确保其他内容在自己的元素中，我看不出如何做到这一点——如果不是，它将保持可见，我相信你不想要。