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

Question

我想使用css3功能来隐藏前一个元素。

基本上，

我想使用复选框隐藏上一个兄弟元素而不使用javascript。

我准备了一个入口点样本。

http://cssdesk.com/5zccy

由于

编辑：

• 我换了样品。
• 我的用例：我希望在我的网站上有可折叠的部分。两个区域由一个简单的复选框分隔并检查它将美妙地隐藏以前的兄弟。

我相信使用纯css会让我减少使用javascript来完成这项任务。

Answer 1

没有css选择器可以选择匹配元素的上一个标记。最接近你只能使用css为下一个元素做的那样：

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

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

Answer 2

您无法隐藏之前的元素 - 仅使用general sibling selector

隐藏以下元素

DEMO

然后您可以定位元素，因此在实际页面上，复选框将显示在.parent div之后。