选中输入时选择下一个元素

Question

HTML：

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

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

input ~ div{
  display: none;
}

input:checked ~ div{
  display: block;
}

显然，~选择器似乎不适用于此处。 +

也没有

还有其他解决方案（除了javascript）吗？

Answer 1

可悲的是，没有办法在纯CSS中选择一个祖先，这就是你选择一个祖先的兄弟所需要的。

我看到人们用标签包围其他内容 - 虽然这是一个非常值得怀疑的做法，但它允许您使用+选择器来设置div的样式：

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

    <div>
      stuff
    </div>
</label>

修改

或者这个（感谢@lnrbob指出来）

<label for="myCheckbox">
    This is my label
</label>

<input id="myCheckbox" type="checkbox" />
<div>
    stuff
</div>

Answer 2

试试这个，我不确定它的跨浏览器兼容性是什么。

input:checked + div
{
background: #333;
height: 30px;
width: 30px;
} 

这应该可行，但我不会这样做，我会做Javascript。

查看我的jsfiddle

Answer 3

如果有人需要其他解决方案

<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; }

快乐编码！！！