html - 当我点击复选框时，只有一个 ul 标签在屏幕上可见

Question

我不明白为什么当我点击复选框时，屏幕上只显示带有 id=menu 而不是 id=social 的 ul 标签。 我需要在每个 ul 标签中设置 display:block。

.show-menu {
    display:block;
}
#menu{
  float:left;
}
#social{
    float:right;
}
ul {
    display: none;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
input[type=checkbox]:checked #social{
    display: block;
}

<label for="show-menu" class="show-menu">&#9776;</label>
<input type="checkbox" id="show-menu" role="button"/>
<ul id="menu">
    <li><a href="home.php">Home</a></li>
    <li><a href="news.php">News</a></li>
    <li><a href="about.php">About</a></li>
</ul>
<div> 
	<ul id="social">
		<li><a href="login.php">Login</a></li>
		<li><a href="register.php">Register</a></li>
    </ul>
</div>

Answer 1

因为 #social 周围的 div。 ~ 是兄弟选择器。如果您需要 div，您可以尝试将 input[type=checkbox]:checked ~ div #social 作为 CSS 选择器。

.show-menu {
    display:block;
}
#menu{
  float:left;
}
#social{
    float:right;
}
ul {
    display: none;
}
input[type=checkbox]{
    display: none;
}
input[type=checkbox]:checked ~ #menu{
    display: block;
}
input[type=checkbox]:checked ~ #social{
    display: block;
}

<label for="show-menu" class="show-menu">&#9776;</label>
<input type="checkbox" id="show-menu" role="button"/>
<ul id="menu">
    <li><a href="home.php">Home</a></li>
    <li><a href="news.php">News</a></li>
    <li><a href="about.php">About</a></li>
</ul>
<ul id="social">
	<li><a href="login.php">Login</a></li>
	<li><a href="register.php">Register</a></li>
</ul>