Html Can'；t单击div内的输入复选框

由于某些原因，当将标签和输入放入div中时，我无法单击它们。这是我的观点

#菜单{
显示：无；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
#菜单>a{
颜色：#212121；
文本对齐：居中；
宽度：100%；
背景色：达克朗格；
高度：50px；
边缘底部：1px；
文字装饰：无；
}
#菜单>.button>p{
字体系列：“Roboto”
}
#菜单>a:悬停{
背景颜色：橙色；
}
#菜单>a:已访问{
颜色：#212121；
}
------------------
.显示菜单{
显示器：flex；
证明内容：中心；
宽度：100%；
文本对齐：居中；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中~#菜单{
显示器：flex；
}
.显示菜单{
显示：块；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
}

显示菜单

您的问题在于此选择器：

输入[type=checkbox]：选中~#菜单

。查看您的DOM，您会发现

#menu

不是复选框的一般同级项，因为您已将复选框嵌套在一个div中。CSS无法向上遍历DOM树并检查父项的同级项您打算执行的操作：

├── div.open
│   ├── label
│   └── input  // input ~ #menu will not select anything
└── div#menu

当您将

元素移出其包装父元素时，您将其放置在

#菜单的同一级别，这意味着您的选择器将工作；）即使这个解决方案看起来很奇怪，但由于您的复选框是永久隐藏的，所以它在DOM树中的哪个级别和位置并不重要

├── div.open
│   └── label
├──  input      // input ~ #menu or input + #menu will work ;)
└── div#menu


#菜单{
显示：无；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
}
#菜单>a{
颜色：#212121；
文本对齐：居中；
宽度：100%；
背景色：达克朗格；
高度：50px；
边缘底部：1px；
文字装饰：无；
}
#菜单>.button>p{
字体系列：“Roboto”
}
#菜单>a:悬停{
背景颜色：橙色；
}
#菜单>a:已访问{
颜色：#212121；
}
------------------.显示菜单{
显示器：flex；
证明内容：中心；
宽度：100%；
文本对齐：居中；
}
输入[类型=复选框]{
显示：无；
}
输入[类型=复选框]：选中~#菜单{
显示器：flex；
}
.显示菜单{
显示：块；
字体系列：“Helvetica Neue”，Helvetica，Arial，无衬线；
文字装饰：无；
颜色：#fff；
背景：19c589；
文本对齐：居中；
填充：10px0；
}

显示菜单
正在检查它。只是不要隐藏复选框来查看它是否有效。问题是，将其放入div时，以下代码不起作用：

input[type=checkbox]:checked ~ #menu {
    display: flex;
}

这是因为
~
选择器选择元素的后续同级，而不是其父元素的后续同级。要使代码只使用CSS和HTML，您不能将输入和标签放在一起，也可以将
#菜单
移动到
中。也可以打开
div

有关更多信息，请参阅，并在此处查看。
非常感谢您提供的详细答案！这就解决了：谢谢你，克里斯！解决了！