CSS汉堡菜单的:checked伪元素失效问题求助

问题核心在于CSS后续兄弟选择器(~)的匹配规则：它只能选中与目标元素同层级、且在目标元素之后的兄弟元素。你的HTML里<ul>写在了<input id="check">前面，所以#check:checked ~ ul这条规则根本找不到对应的<ul>，导致样式不生效；而#check:checked ~ label能生效，是因为<label>确实在<input>后面。

解决方法 #

最稳妥且兼容性最好的方式是调整HTML结构，把<input id="check">放到<ul>的前面：

修改后的HTML代码：

<input type="checkbox" id="check">
<ul>
  <li><a href="#">ITEM 1</a></li>
  <li><a href="#">ITEM 2</a></li>
  <li><a href="#">ITEM 3</a></li>
</ul>
<!--hamburguer menu-->
<label for="check">
  <i class="fas fa-bars" id="btn"></i>
  <i class="fas fa-times" id="cancel"></i>
</label>

（注意补上之前缺失的</label>闭合标签，避免结构错误）

调整后，原CSS中的#check:checked ~ ul { left: 0; }就能正确匹配到<ul>，菜单点击显示的功能会正常工作。

备选方案（不调整结构时） #

如果不想改动HTML结构，可以使用CSS的:has()伪类（仅支持现代浏览器），把原CSS中的#check:checked ~ ul替换为：

body:has(#check:checked) ul {
  left: 0;
}

但这种方式兼容性不如调整结构的方案，建议优先选择调整HTML结构的方式。

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