为什么CSS同级（〜）选择器不能与：checked一起使用？

Question

我无法获得：检查是否可以使用〜

#menu {
  background-color: red;
}

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

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

以下是问题的代码笔：https://codepen.io/anon/pen/jowQWJ

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

我肯定想念一些非常明显的东西，因为对我来说这很简单……