Html 为什么我的汉堡菜单使用复选框不起作用？

我正在尝试只使用HTML和CSS制作汉堡包菜单。我试过了。现在我不知道为什么我的代码不起作用

标题{
背景色：#f1f1；
文本对齐：居中；
}
.内联{
显示器：flex；
证明内容：周围的空间；
对齐项目：居中；
}
标题.主#切换{
显示：无；
}
header.primary#切换：选中~ header.primary导航{
显示：块；
} 
标题.主标签{
字体大小：2.25rem；
显示：块；
光标：指针；
}
标题.主导航{
显示：无；
}
标题导航ul{
字体大小：1.25rem；
}
标题.主导航ul li{
填充：1rem；
}
标题nav ul li a{
文字装饰：无；
颜色：#000000；
}
收割台导航ul li.active{
底部边框：2件纯黑；
利润率：0.5%；
}

☰

将

内的

作为目标，该

内的
是您的
#切换：选中的

因此，您需要将
放在
之前，如下所示：

<input id="toggle" type="checkbox">
<header>
   <div class="primary">
      <nav>...</nav>
   </div>
</header>


☰





因为
nav
不是
#toggle
的兄弟，它们在不同的容器中。您需要将要显示的内容放在输入旁边。。。
<input id="toggle" type="checkbox">
<header>
   <div class="primary">
      <nav>...</nav>
   </div>
</header>