仅使用CSS实现跨层级单选框选中切换Div内容的方法

问题背景 #

原来的代码里单选按钮和内容区块在同一层级，能靠兄弟选择器实现切换，但现在需要把单选按钮放到level2 Div里，而内容区块在second Div（且second不在level2内），要求只用CSS+HTML完成选中对应单选框显示对应内容的效果。

解决方案思路 #

CSS选择器没法直接向上选中父元素的兄弟，但现在主流浏览器都支持:has()选择器了，我们可以利用它来检测level2里的单选框是否被选中，再结合兄弟选择器找到内容容器，最后控制对应内容的显示状态。

完整代码实现 #

CSS代码

/* 默认隐藏两个内容块 */
.content1, .content2 {
  display: none;
}

/* 当toggle1被选中时，显示content1 */
.level2:has(.toggle1:checked) ~ .content-wrapper .content1 {
  display: block;
}

/* 当toggle2被选中时，显示content2 */
.level2:has(.toggle2:checked) ~ .content-wrapper .content2 {
  display: block;
}

HTML代码

<div class="level1">
  <!-- 单选按钮放在level2里，和内容容器同级 -->
  <div class="level2">
    <input type="radio" id="toggle1" name="toggle" class="toggle1">
    <label for="toggle1">toggle1</label>
    <input type="radio" id="toggle2" name="toggle" class="toggle2">
    <label for="toggle2">toggle2</label>
  </div>
  
  <!-- 内容容器，和level2是兄弟关系 -->
  <div class="content-wrapper">
    <div class="second">
      <div class="tab content1">Content1</div>
      <div class="tab content2">Content2</div>
    </div>
  </div>
</div>

代码说明 #

1. 结构调整：把level2（单选框容器）和content-wrapper（内容容器）设置为level1的直接子元素，让它们成为兄弟节点，这样就能用兄弟选择器~来关联。
2. :has()的作用：.level2:has(.toggle1:checked)表示“包含被选中的toggle1的level2元素”，通过这个选择器我们能定位到对应单选框所在的父容器。
3. 层级选择：找到level2的兄弟元素content-wrapper后，再选中里面的content1/content2，设置显示状态。

如果需要兼容不支持:has()的旧浏览器，还有一种替代方案：把单选框移到level1的最顶部，再用兄弟选择器控制后续容器的内容显示，但:has()的方案更贴合你要求的DOM结构，目前Chrome、Firefox、Safari等主流浏览器都已支持该选择器。

内容的提问来源于stack exchange，提问作者catchiato