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

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

您不能隐藏前面的元素 - 只能使用通用兄弟选择器隐藏以下元素

演示

然后您可能能够定位元素，因此在实际页面上，复选框将出现在.parentdiv 之后。