CSS复选框hack与非同级内容

Question

以下 CSS 复选框技巧的前提是内容与复选框是兄弟元素。当标签被点击时，内容会切换显示/隐藏。 DEMO

<input id="checkbox" type="checkbox" />
<label for="checkbox">
  Toggle content
</label>
<div class="content">Content here</div>

#checkbox {
  display: none;
}

#checkbox:not(:checked) ~ .content {
  display: none;
}

使用CSS是否能够实现相同的效果，即使内容不是复选框的兄弟节点？例如：

<div>
  <input id="checkbox" type="checkbox" />
  <label for="checkbox">
    Toggle content
  </label>
</div>
<div class="content">Content here</div>

- Misha Moroshko

---

不使用JavaScript或者一些hacky伪元素是不可能的。 - j08691

这可以概括为“如何根据复选框的选中状态样式化任意元素？”，这使它成为 CSS 选择器的最常见限制之一的重复问题，甚至更普遍地说，https://dev59.com/d14b5IYBdhLWcg3wxEKm。答案取决于您是否可以使用可用于您的组合器将两个元素链接起来。它可能不是复选框的同级元素，但例如它可以是复选框同级元素的后代。 - BoltClock

在CSS4父选择器引入之前，无法使用CSS实现此功能。您只能通过JS来实现。您也可以立即使用此插件：https://github.com/Idered/cssParentSelector - m4n0

@Misha Moroshko：不，没有父选择器，所以你无法通过选择复选框的父元素来访问它的兄弟元素。 - BoltClock

我相信你仍然可以像上面的演示fiddle中所做的那样做同样的事情。你能解释一下为什么你试图以不可能仅使用CSS来处理的方式去做吗？ - Mr_Green

Answer 1

你可以使用 :target 伪类和锚点代替复选框来实现。虽然丑陋，但只需使用CSS即可：

a {
  color: #000000;
  text-decoration: none;
}

#off {
  display: none;
}

.content {
  display: none;
}

#your-target:target ~ .content {
  display: block;
}

#your-target:target #on {
  display: none;
}

#your-target:target #off {
  display: block;
}

<div id="your-target">
  <a id="on" href="#your-target">
    Toggle content
  </a>
  <a id="off" href="#">
    Toggle content
  </a>
</div>
<div class="content">Content here</div>

- r4ph43l