html - 为什么 CSS 兄弟 (~) 选择器不适用于 :checked？

Question

我无法 :checked to work with ~

#menu {
  background-color: red;
}

#trigger:checked ~ #menu {
  background-color: green;
}

<input type="checkbox" id="trigger" />
<div id="menu">
  <h1>Hello</h1>
</div>

这是问题的 CodePen：https ://codepen.io/anon/pen/jowQWJ

有人可以解释为什么它不起作用吗？

我一定错过了一些非常明显的东西，因为它对我来说似乎很简单......

标签： htmlcsscss-selectorssiblings