点击复选框仅id=menu的ul显示，需设置所有ul为display:block的CSS问题

嘿，我一眼就瞅出问题出在哪了！你的CSS选择器写错了，才导致#social没法被正确选中显示。

问题根源 #

你写的这段代码：

input[type=checkbox]:checked #social{ display: block; }

这里用的是后代选择器（空格），它会去找复选框内部的#social元素，但实际上#social是复选框的同级元素，所以这个选择器完全匹配不到目标元素。而#menu能正常显示，是因为你用了正确的兄弟选择器~：

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

修复方案 #

只需要把#social的选择器也改成兄弟选择器~就行，或者更简洁地把两个选择器合并：

修正后的CSS代码

.show-menu { display:block; }
#menu{ float:left; }
#social{ float:right; }
ul { display: none; }
input[type=checkbox]{ display: none; }
/* 用兄弟选择器同时选中两个ul */
input[type=checkbox]:checked ~ #menu,
input[type=checkbox]:checked ~ #social {
  display: block;
}

额外说明 #

要确保你的HTML结构里，input[type=checkbox]和#menu、#social是同级元素（也就是它们有同一个父元素），这样兄弟选择器~才能生效。比如正确的HTML结构大概是这样的：

<label for="show-menu" class="show-menu">&#9776;</label>
<input type="checkbox" id="show-menu">
<ul id="menu">...</ul>
<ul id="social">...</ul>

这样当你点击复选框（其实是点击label触发）时，两个ul都会被设置为display:block啦！

内容的提问来源于stack exchange，提问作者TimeToEnjoy