勾选hamburger-checkbox复选框后overlay-menu无法隐藏问题咨询

问题原因 #

CSS的兄弟选择器~仅能匹配同一个父元素下、位于选择器主体后方的同级元素。你现有的控制代码不生效是因为：

• 汉堡菜单的动画控制目标（.hamburger-bun、.hamburger-burger）和.hamburger-checkbox同属.hamburger-wrapper的直接子元素，是同级关系，所以~选择器可以正常匹配
• .overlay-menu是.hamburger-menu的同级元素，并不在.hamburger-wrapper容器内，和.hamburger-checkbox不存在同级关系，所以原有选择器无法命中目标元素

解决方案 #

将原有CSS第154行的控制代码替换为以下内容即可：

.hamburger-menu:has(.hamburger-checkbox:checked) ~ .overlay-menu {
  display: none;
}

上述代码使用:has()选择器，匹配到包含已勾选复选框的.hamburger-menu元素后，再选中它的同级兄弟元素.overlay-menu修改显示状态，兼容Chrome 105+、Firefox 121+、Safari 15.4+等所有现代主流浏览器。

如果需要兼容更低版本浏览器，可以调整HTML结构，将.hamburger-checkbox移到<nav>标签下作为直接子元素，再使用兄弟选择器控制即可。

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