当网页中存在多组独立标签页时，若每组 radio 按钮的 name 属性值不一致，会导致跨组互斥失效，出现“点击一个、多个同时高亮”的异常行为。根本解决方法是确保每组标签页内的所有 radio 共享唯一且统一的 name 值。
当网页中存在多组独立标签页时，若每组 radio 按钮的 name 属性值不一致，会导致跨组互斥失效，出现“点击一个、多个同时高亮”的异常行为。根本解决方法是确保每组标签页内的所有 radio 共享**唯一且统一的 name 值**。
在您的代码中，问题根源非常明确：每组标签页使用了不同的 name 属性值（如 tab-group-1、tab-group-3、tab-group-5），这使得浏览器将它们视为完全无关的单选控件组——结果就是：点击 1990s 区域的 blink-182（name="tab-group-3"）时，它只会与同组内另一个 radio（Three Days Grace）互斥；但 1980s 或 2000s 的 radio 完全不受影响，因此视觉上可能出现“多个标签同时高亮”的错觉（尤其当 CSS 选择器未严格限定作用域时）。
更关键的是，您当前的 CSS 规则：
[type="radio"]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 1;
}使用了通用兄弟选择器 ~，它会匹配同一父级下后续所有符合条件的 label。但由于各组 .punk1 容器彼此独立，且 radio 分散在不同容器中，该样式实际只对当前 .punk1 内部生效——真正引发“双选”视觉干扰的，是 z-index 层叠逻辑与 DOM 结构叠加造成的显示重叠（例如内容区定位绝对、z-index 竞争），而根本诱因仍是 name 分组错误导致状态管理失控。
✅ 正确做法：为每一组独立标签页分配专属且内部统一的 name，例如：
<!-- 1980s 标签组 -->
<div class="punk1">
<div class="tab">
<input type="radio" id="tab-1" name="tabs-80s" checked>
<label for="tab-1">Deftones</label>
<div class="content">founded in 1988 in Sacramento, CA</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tabs-80s">
<label for="tab-2">Radiohead</label>
<div class="content">formed in Abingdon, Oxfordshire in 1985</div>
</div>
</div>
<!-- 1990s 标签组 -->
<div class="punk1">
<div class="tab">
<input type="radio" id="tab-3" name="tabs-90s" checked>
<label for="tab-3">blink-182</label>
<div class="content">formed in Poway, California, in 1992</div>
</div>
<div class="tab">
<input type="radio" id="tab-4" name="tabs-90s">
<label for="tab-4">Three Days Grace</label>
<div class="content">formed in Norwood, Ontario, in 1992</div>
</div>
</div>
<!-- 2000s 标签组 -->
<div class="punk1">
<div class="tab">
<input type="radio" id="tab-5" name="tabs-00s" checked>
<label for="tab-5">My Chemical Romance</label>
<div class="content">formed in Newark, New Jersey in 2001</div>
</div>
<div class="tab">
<input type="radio" id="tab-6" name="tabs-00s">
<label for="tab-6">Panic! at the Disco</label>
<div class="content">formed in Las Vegas, Nevada in 2004</div>
</div>
</div>? 重要注意事项：
- ✅
name值必须完全相同（区分大小写），且仅在同一组内保持唯一； - ❌ 不要重复使用
tab-group-1、tab-group-3这类无规律命名——改用语义化名称如tabs-80s更易维护； - ⚠️ 所有同组 radio 必须位于同一个
.punk1容器内（您的结构已满足），否则~选择器无法正确关联 label 和 content； - ? 若仍存在视觉残留，检查是否遗漏
z-index冲突或.content的position: absolute导致层叠错乱——可为每组.punk1添加position: relative确保绝对定位内容局部化。
通过统一每组 name 属性，浏览器即可正确执行单选逻辑：点击某组任一 tab，仅该组内对应 radio 被选中，CSS 伪类精准触发，内容切换与视觉反馈完全同步。这是纯 CSS 标签页实现中最核心、不可妥协的规范。
