由于某些原因，将标签和输入内容放入div时，无法单击它们。这是我的意思。
#menu {
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
}
#menu > a {
color:#212121;
text-align: center;
width: 100%;
background-color: darkorange;
height: 50px;
margin-bottom: 1px;
text-decoration: none;
}
#menu > .button > p {
font-family: 'Roboto'
}
#menu > a:hover {
background-color: orangered;
}
#menu > a:visited {
color:#212121;
}
------------------
.show-menu {
display: flex;
justify-content: center;
width: 100%;
text-align: center;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked ~ #menu {
display: flex;
}
.show-menu {
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
}<body>
<div class="open">
<label for="show-menu" class="show-menu">Show Menu</label>
<input type="checkbox" id="show-menu" role="button">
</div>
<div id="menu">
<a href="#"><div class="button"><p>HOME</p></div></a>
<a href="#"><div class="button"><p>ARTICLES</p></div></a>
<a href="#"> <div class="button"><p>ADVISORS</p></div></a>
<a href="#"><div class="button"><p>HELP</p></div></a>
</div>
</body>但是，如果我在.open div之外使用它，则它可以工作。我尝试过使用其中两个标签和输入，一个在内部，一个在外部，如果这样做，它们都可以工作。不过，我只想使用一个。
为什么div不允许输入起作用？
你能帮助我吗？
谢谢！
您的问题在于选择器：input[type=checkbox]:checked ~ #menu。查看DOM，您将意识到这#menu 不是复选框的一般同级，因为您已将复选框嵌套在div中。CSS没有能力遍历DOM树并检查父级的同级物—您打算这样做：
??? div.open
? ??? label
? ??? input // input ~ #menu will not select anything
??? div#menu
当您将<input>元素移出其包装父元素时，会将其放置在的同一级别上#menu，这意味着您的选择器将起作用；它位于哪个级别和位置在DOM树中。
??? div.open
? ??? label
??? input // input ~ #menu or input + #menu will work ;)
??? div#menu
??? div.open
? ??? label
? ??? input // input ~ #menu will not select anything
??? div#menu
??? div.open
? ??? label
??? input // input ~ #menu or input + #menu will work ;)
??? div#menu
另一种解决方案是除去<div>标签+输入元素周围的包装物：
??? label
??? input // input ~ #menu or input + #menu will work ;)
??? div#menu
#menu {
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
}
#menu>a {
color: #212121;
text-align: center;
width: 100%;
background-color: darkorange;
height: 50px;
margin-bottom: 1px;
text-decoration: none;
}
#menu>.button>p {
font-family: 'Roboto'
}
#menu>a:hover {
background-color: orangered;
}
#menu>a:visited {
color: #212121;
}
------------------ .show-menu {
display: flex;
justify-content: center;
width: 100%;
text-align: center;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox]:checked~#menu {
display: flex;
}
.show-menu {
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #19c589;
text-align: center;
padding: 10px 0;
}<div class="open">
<label for="show-menu" class="show-menu">Show Menu</label>
</div>
<input type="checkbox" id="show-menu" role="button" />
<div id="menu">
<a href="#">
<div class="button">
<p>HOME</p>
</div>
</a>
<a href="#">
<div class="button">
<p>ARTICLES</p>
</div>
</a>
<a href="#">
<div class="button">
<p>ADVISORS</p>
</div>
</a>
<a href="#">
<div class="button">
<p>HELP</p>
</div>
</a>
</div>注意：但是，如果您想使用基于JS的解决方案，则在编写DOM时会有更多的自由：)