Css 通过选中的选择器隐藏上一个元素

我想使用css3特性来隐藏前面的元素

基本上

我想使用一个复选框来隐藏以前的同级元素，而不使用javascript

我准备了一个入口点的样品

谢谢

编辑：

• 我换了样品
• 我的用例：我希望在我的站点上有可折叠的部分。两个区域由一个简单的复选框分隔，选中它将漂亮地隐藏以前的兄弟姐妹

---

我相信使用纯css可以减少使用javascript来完成此任务。

没有css选择器来选择匹配元素的前一个标记。仅使用css可以获得的最接近的元素，它正在为下一个元素执行此操作：

<input class="hider" type="checkbox" /> child
<div class="parent">
    Parent
</div>​

.hider:checked + * {
    display:none;
}​

child
父母亲
​
.hider:已选中+*{
显示：无；
}​

您不能隐藏前面的元素，只能隐藏以下具有

---

然后，您可以定位元素，因此在实际页面上，复选框将出现在

.parent

div之后。

您能更具体一点吗？上一个元素，父元素？更新了我的问题。很抱歉混淆了父子关系而不是兄弟关系。