被困在这几个小时，不能完全弄清楚出了什么问题。我有 2 个主要选项卡，当您单击它们时，会在内容中打开另一组选项卡。第一个主选项卡及其子选项卡工作正常。但是，第二个选项卡及其子选项卡不起作用。这是代码-感谢您的帮助。
这是 HTML：
<div class="tabs">
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">EVOLVE</label>
<div class="content">
<div class="table tab">
<input type="radio" id="tabchild-1" name="tabchild-group-1" checked>
<label for="tabchild-1">FOREST</label>
<div class="content">
Forest Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-2" name="tabchild-group-1">
<label for="tabchild-2">MOUNTAINS</label>
<div class="content">
Mountain Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-3" name="tabchild-group-1">
<label for="tabchild-3">SWAMP</label>
<div class="content">
Swamp Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-4" name="tabchild-group-1">
<label for="tabchild-4">PLAINS</label>
<div class="content">
Plains Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-5" name="tabchild-group-1">
<label for="tabchild-5">DARKNESS</label>
<div class="content">
Darkness Cards go Here.
</div>
</div>
<div class="table tab">
<input type="radio" id="tabchild-6" name="tabchild-group-1">
<label for="tabchild-6">NEUTRAL</label>
<div class="content">
Neutral Cards go Here.
</div>
</div>
</div>
</div>
<div class="tab2">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">ENHANCE</label>
<div class="content2">
<div class="table2 tab2">
<input type="radio" id="tabchild-1" name="tabchild-group-2" checked>
<label for="tabchild-1">FOREST</label>
<div class="content2">
Forest Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-2" name="tabchild-group-2">
<label for="tabchild-2">MOUNTAINS</label>
<div class="content2">
Mountain Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-3" name="tabchild-group-2">
<label for="tabchild-3">SWAMP</label>
<div class="content2">
Swamp Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-4" name="tabchild-group-2">
<label for="tabchild-4">PLAINS</label>
<div class="content2">
Plains Hero Cards go Here.
</div>
</div>
<div class="table2 tab2">
<input type="radio" id="tabchild-5" name="tabchild-group-2">
<label for="tabchild-5">DARKNESS</label>
<div class="content2">
Darkness Hero Cards go Here.
</div>
</div>
</div>
</div>
<div class="background_tab"></div>
</div>
这是CSS
.tabs {position: relative;min-height: 200px;}
.tab, .tab2 {float: left;}
.tab{text-decoration:none;}
.tab2{text-decoration:none;}
.tab label, .tab2 label {
padding: 10px;
margin-left: -1px;
position: relative;
left: 1px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-right: 1px solid #444;
border-left: 1px solid #333;
background: #3d3d3e;
background: -webkit-linear-gradient(#3d3d3e, #2a2a2a);
background: -moz-linear-gradient(#3d3d3e, #2a2a2a);
background: -o-linear-gradient(#3d3d3e, #2a2a2a);
background: linear-gradient(#3d3d3e, #2a2a2a);
box-shadow: 0 1px 0 #3d3d3d, inset 0 1px 0 #5a5a5a;
height: 100%;
line-height: 24px;
overflow: hidden;
text-align: center;
font-size: 12px;
font-family: verdana;
font-weight:bolder;
z-index:1;
}
.tab [type=radio], .tab2 [type=radio]{display: none;}
.content, .content2{
position: absolute;
top: 28px;
left: 0;
right: 0;
bottom: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid #666;
background: #5d5d5e;
background: -webkit-linear-gradient(#5d5d5e, #4a4a4a);
background: -moz-linear-gradient(#5d5d5e, #4a4a4a);
background: -o-linear-gradient(#5d5d5e, #4a4a4a);
background: linear-gradient(#5d5d5e, #4a4a4a);
box-shadow: 0 1px 0 #5d5d5d, inset 0 1px 0 #4a4a4a;
padding: 0px 25px 25px;
margin-top:25px;
z-index:1
}
[type=radio]:checked ~ label{
box-shadow: inset 0 0 10px black;
text-shadow: -2px -2px 1px #111111, -1px -1px 1px #111111, 1px 1px 1px #111111, 2px 2px 1px #111111, -3px -3px 1px #111111, -1px 1px 1px #111111, -3px 3px 1px #111111, 5px -2px 1px #111111, 5px 3px 1px #111111;
color:orangered;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {z-index: 2;}
[type=radio]:checked ~ label ~ .content2 {z-index: 3;}
.background_tab{
float:left;
padding: 10px 10px 26px;
margin-left: -1px;
position: relative;
left: 2px;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-left: 1px solid #333;
background: #3d3d3e;
background: -webkit-linear-gradient(#3d3d3e, #2a2a2a);
background: -moz-linear-gradient(#3d3d3e, #2a2a2a);
background: -o-linear-gradient(#3d3d3e, #2a2a2a);
background: linear-gradient(#3d3d3e, #2a2a2a);
box-shadow: 0 1px 0 #3d3d3d, inset 0 1px 0 #5a5a5a;
height: 100%;
line-height: 24px;
overflow: hidden;
text-align: center;
font-size: 12px;
font-family: verdana;
margin-top:14px;
width:729px;
}