css - 检查输入时选择下一个元素

Question

HTML:

<label>
  <input type="checkbox" />
</label>
<div>
  stuff
</div>

我希望能够根据输入的选中状态来设置 DIV 元素的样式，例如

input ~ div{
  display: none;
}

input:checked ~ div{
  display: block;
}

显然~选择器在这里似乎不起作用。 + 也没有

还有其他解决方案吗(除了javascript)？

Answer 1

如果有人需要额外的解决方案

<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>

<div>
    show when check box is checked
</div>

和CSS

#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }

快乐编码!!!