html – CSS复选框事件不起作用

你在DOM中根本没有id #menuOverlay的元素.

这将适用于您当前的css的唯一方法如下：

#menuToggle {
    height: 24px;
    width: 24px;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
}
#menuToggle:checked + #menuOverlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    opacity:0.95;
    z-index: 3;
}
@media only screen and (min-width: 0pX) and (max-width: 768pX) {
    input#menuToggle:checked + #menuOverlay {
        BACkground:#000;
        height:100%;
    }
}
@media only screen and (min-width: 769pX) {
    input#menuToggle:checked + #menuOverlay {
        BACkground:#1f1f1f;
        width:100%;
        height:100%;
    }
}

<nav>
    <div id="topBar"></div>
    <div id="menuTab">
        <input type="checkbox" id="menuToggle" />&equiv;
        <div id="menuOverlay"></div> <!-- add div element here with id menuOverlay -->
    </div>
</nav>
<section>
    <div id="slide1" class="slide"></div>
</section>