Checkbox Hack中多次使用:checked伪选择器，SVG菜单图标无法旋转

哦，这问题我太熟了！核心原因就是你的CSS选择器找错了目标元素——你的.menu-logo-closed SVG是嵌套在<label>标签里的，而你用的~兄弟选择器只能选中当前元素后面的同级元素，根本没法穿透到子元素里去，所以那个:checked样式完全没生效。

问题代码分析 #

先看你的HTML结构层级：

<input id="header" class="section__checkbox" type="checkbox">
<label for="header">
  <svg class="menu-logo-closed">...</svg> <!-- 这是label的子元素，不是input的同级 -->
</label>
<div class="section">...</div> <!-- 这是input的同级，所以选择器能生效 -->

你的CSS里写的.section__checkbox:checked~.menu-logo-closed，是想找input后面的同级.menu-logo-closed元素，但这个SVG根本不在input的同级层级，自然不会被选中。而.section是input的同级，所以对应的:checked样式能正常工作。

修复方案 #

最简单的办法就是调整CSS选择器，利用input和label的相邻关系，选中label里的SVG：

/* 替换原来无效的选择器 */
.section__checkbox:checked + label .menu-logo-closed {
  transform: rotate(-2.33deg);
}

这里的+是相邻兄弟选择器，能精准选中input后面紧跟着的label元素，再通过.menu-logo-closed选中label里的SVG，这样当input被勾选时，SVG的旋转样式就能正常触发了。

额外验证小技巧 #

如果你不确定选择器是否生效，可以临时加个背景色测试：

.section__checkbox:checked + label .menu-logo-closed {
  transform: rotate(-2.33deg);
  background: pink; /* 看SVG是否变粉色，确认选择器生效 */
}

如果SVG出现粉色背景，就说明选择器没问题，旋转效果自然也会生效。

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