CSS checked状态不生效：HTML+CSS响应式导航栏汉堡菜单故障求助

问题原因 #

你遇到的问题核心是两个基础属性和选择器的匹配错误：

• checkbox没有设置id="check"，的for属性需要和input的id完全匹配才能触发选中状态切换，你当前点击汉堡按钮不会改变checkbox的状态
• CSS的兄弟选择器~只能匹配同一个父元素下、当前元素之后的同级节点，你的checkbox被额外的div包裹，和.nav-list不是同级元素，所以选中状态的样式规则永远不会生效

修复方案 #

1. 修改HTML nav部分结构

删掉包裹checkbox和汉堡按钮的多余div，给checkbox加上id属性，调整后代码如下：

<nav>
    <div class="logo-container">
        <img src="">
        <label class="logo-txt">King Toot's</label>
    </div>

    <!-- 新增id属性，移出外层div -->
    <input type="checkbox" name="check" id="check">
    <label for="check" class="hamburger-btn">
        <i class="fas fa-bars"></i>
    </label>
    
    <ul class="nav-list">
        <li><a href="#">Instrumentos</a></li>
        <li><a href="#">Marcas</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</nav>

2. 可选优化（提升过渡效果）

你原来的代码里.nav-list li用了display:none会导致过渡动画失效，可以调整CSS实现淡入效果：

.nav-list li{
    /* 替换display:none为opacity控制显隐 */
    opacity: 0;
    line-height: 30px;
    margin: 50px 0;
    transition: all .5s;
}
#check:checked ~ .nav-list li{
    /* 替换display:block为opacity:1 */
    opacity: 1;
}

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