使用非同级内容的 CSS 复选框 hack答案

【问题标题】：CSS checkbox hack with non-sibling content使用非同级内容的 CSS 复选框 hack
【发布时间】：2015-11-05 01:24:45
【问题描述】：

以下 CSS 复选框 hack 在内容是复选框的同级的假设下工作。点击标签时，内容被切换。

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

【问题讨论】：

如果没有 JavaScript 或一些 hacky 伪元素，这是不可能的。
这可以概括为“如何根据复选框的选中状态设置任意元素的样式？”，这使其成为 CSS 选择器最常见限制之一的副本，或者更一般地说，stackoverflow.com/questions/28708741/… 答案是，这取决于您是否可以使用可用的组合器链接这两个元素。例如，它可能不是复选框的兄弟，但可能是复选框的兄弟的后代。
在引入 CSS4 父选择器之前不使用 CSS。您只能通过 JS 来实现这一点。你现在也可以使用这个插件：github.com/Idered/cssParentSelector
@BoltClock 感谢您的链接。这可以通过问题中的布局（HTML的最后一点）来实现吗？
@Misha Moroshko：不：没有父选择器，因此您不能从复选框的父元素中选择以到达其兄弟元素。

标签： html css checkbox css-selectors

【解决方案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>

【讨论】：