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 的 child，它是 input 的兄弟，实际上 .flex-nav 直接跟在 nav 之后，因此 +

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

tilda selector css, label button not working for responsive menu

html

css

responsive