仅使用CSS在单选按钮选中后切换div内容

Question

当单选按钮与"content1"one_answers"content2"
如何使它工作，如果我把单选按钮放到另一个div "second">

假设toggle1被选中，那么content1将显示

(只使用CSS和HTML，不使用javascript)

.content1 {
display: none;
}
.content2 {
display: none;
}
.toggle1:checked ~ .grid-container .content1 {
display: block;
}
.toggle2:checked ~ .grid-container .content2 {
display: block;
}

<div class="level1">
<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>
<div>
<div class="second">
<div class="tab content1">Content1</div>
<div class="tab content2">Content2</div>
</div>

Answer 1

当使用通用兄弟组合子~时，两个元素必须是"同一父元素的子元素"。给定您现有的代码，应用"grid-container"类到<input>元素的同胞<div>。

.content1,
.content2 {
display: none;
}
.toggle1:checked ~ .grid-container .content1,
.toggle2:checked ~ .grid-container .content2 {
display: block;
}

<div class="level1">
<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 class="grid-container">
<div>
<div class="second">
<div class="tab content1">Content1</div>
<div class="tab content2">Content2</div>
</div>
</div>
</div>
</div>
</div>