CSS相邻兄弟选择器（+）作用于同级元素失效问题排查

问题根源 #

你遇到的核心问题是CSS相邻兄弟选择器（+）的匹配规则：它只能选择紧接在目标元素之后的第一个同级元素。看你给出的代码，.toggler复选框是放在.menu元素之后的，所以.toggler:checked+.menu这个选择器根本找不到对应的.menu元素——因为.menu在.toggler的前面，不符合相邻兄弟选择器“后接元素”的要求。

最简单的解决方案：调整HTML结构 #

把.toggler复选框放到.menu的紧前面，这样相邻兄弟选择器就能正常匹配了：

修正后的HTML

<input type="checkbox" class="toggler">
<div class="menu">
  <div class="menu-background"></div>
  <div class="menu-navigation"></div>
</div>
<div class="hamburger">
  <!-- 汉堡按钮内容 -->
</div>

对应的CSS

.toggler:checked + .menu { 
  width: 350px; 
}

这样当复选框被勾选时，紧接在它后面的.menu元素就会触发样式变化，完全符合你的需求。

不想调整结构？试试:has()伪类（需考虑兼容性） #

如果因为某种原因不能修改HTML结构，可以用CSS的:has()伪类（这是CSS Selectors Level 4的特性，现代浏览器基本支持，但旧版IE完全不支持）。假设.menu和.toggler有共同的父容器（比如.nav-container），可以这样写：

.nav-container:has(.toggler:checked) .menu {
  width: 350px;
}

这个选择器的意思是：当.nav-container里面的.toggler被勾选时，选中.nav-container下的.menu元素，这样不管.toggler和.menu的顺序如何，都能生效。

为什么之前对孙元素生效？ #

你提到选择器对.hamburger的子元素生效，那是因为你可能写了类似.toggler:checked+.hamburger .child-element这样的选择器——这里.hamburger是.toggler的紧接同级元素，所以+.hamburger能匹配到，进而选中它的子元素，这和你对.menu的操作逻辑不一样，因为.menu不在.toggler的相邻位置。

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