html - tilda 选择器 css，标签按钮不适用于响应式菜单

Question

我的问题是我正在尝试创建响应式菜单，一切正常，在那之后，我做了什么我隐藏了我的菜单并在屏幕小于特定尺寸时显示一个按钮，这很好我的按钮显示，但是选中复选框后我的菜单没有显示， 我正在尝试使用复选框来显示菜单，这意味着如果选中复选框而不是仅在屏幕小于 600 像素时显示菜单，请阅读媒体查询的最后一部分，因为这就是问题所在，其余代码有效。 请阅读 css 代码中的注释，

而且我认为问题出在 css 的最后一个样式中，所以请先检查一下，您不必阅读整个代码，我在代码中留下注释以告诉您哪部分不起作用，

HTML代码

<div class="wrapper">
    <label for="show-menu" class="show-menu">Show Menu</label>
    <input type="checkbox" id="show-menu">
    <nav>

            <ul class="flex-nav">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Plans</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
    </nav>
</div>

CSS 代码

*{margin:0; padding:0;}

.wrapper  { 
    color:white;
    font-family:Helvetica;
}
nav{background:black}
/*making the button and checkbox invisible
This work fine, 
I try to display it in media query, work fine
it showed up when screen is less than 600px
*/
.show-menu {
    display:none;

}
input[type=checkbox]{
    display:none;
}

/*styling nav bar*/

.flex-nav{
    display:flex;
    list-style-type:none;
}

.flex-nav li{
    flex:1;
    text-align:center;
}

.flex-nav li a {
    display:block;
    padding:20px 0;
    text-decoration:none;
}


/*media query*/
@media screen and (max-width:600px){
    /*displaying the button work fine, also
    read the first comment */
    .show-menu{
    background:#1a1a1a;
    cursor:pointer;
    padding:20px 0;
    display:flex;
    justify-content:center;
    }

    /*saying dont display class flex-nav work fine*/
    .flex-nav{
        display:none;
    }
    /*now saying display flex-nav children if button is 
    click. does not work driving my tiny brain nuts*/
    input[type=checkbox]:checked ~ .flex-nav
    {
        display:block;
    }

}

Answer 1

最后一个 CSS 选择器(在媒体查询中)应该是

input[type=checkbox]:checked + nav > .flex-nav {
  display:block;
}

原因:input 和 .flex-nav 不是兄弟。 .flex-nav是nav的子元素，它是input的兄弟，实际上是.flex-nav 直接跟在 nav 之后，因此 +