纯CSS Tab切换最可靠方案是radio+checked，需统一name确保互斥，用~选择器容错更强，内容块应避免display:none而用visibility+height隐藏，初始选中须显式加checked属性。
纯 CSS 实现 Tab 切换，input[type="radio"] + :checked 是目前最可靠、兼容性最好（IE9+）、无障碍支持到位的方案。它不依赖 JS，状态可被浏览器原生维护，刷新不丢，默认选中也自然可控——前提是 HTML 结构和选择器写对。
为什么必须用同一 name 属性？
radio 的互斥行为完全由 name 决定。如果漏写或拼错 name，点击标签后多个 radio 同时为 :checked，内容块就会同时显示。
-
name值必须完全一致，比如都设为name="tab" - 不能靠 class 或其他属性模拟“分组”，浏览器只认
name - 哪怕只有一个 tab 也要写
name，否则未来扩展时容易出错
~ 和 + 兄弟选择器怎么选？
它们决定你能否准确把 :checked 状态“传递”到对应的内容块。关键区别在于 DOM 位置约束：
-
+只匹配**紧邻的下一个兄弟元素**：如果input后面插了<span>说明</span>，input:checked + .panel就失效 -
~匹配**后续所有同级兄弟元素**：只要内容块和input在同一父容器下、且在它后面，就能命中 - 推荐优先用
~，容错性更强；但若结构明确无插入项，+性能略优
内容块隐藏方式不能用 display: none？
直接用 display: none 会让屏幕阅读器跳过内容，破坏可访问性。更稳妥的做法是组合视觉隐藏 + 语义保留：
立即学习“前端免费学习笔记（深入）”；
- 用
visibility: hidden保持占位与语义流 - 配合
height: 0+overflow: hidden实现“收起”效果 - 过渡动画只能加在
opacity或transform上，height不支持平滑过渡 - 示例：
.panel { visibility: hidden; height: 0; overflow: hidden; transition: opacity 0.2s; } input:checked ~ .panel { visibility: visible; height: auto; opacity: 1; }
初始选中状态怎么设才可靠？
别指望只靠 CSS 设置默认激活——必须显式给第一个 input 加 checked 属性：
- 写成
<input type="radio" name="tab" id="tab1" checked>，不是checked="true"或其他变体 - JS 动态插入时，也要同步设置该属性，否则首次渲染不生效
- 不要用
:first-of-type:checked这类伪类模拟默认状态，它不触发实际选中逻辑
真正卡住人的从来不是 CSS 写法多难，而是结构里一个漏掉的 for、一个错位的 name、或一个误用的 display: none。这些细节一旦出错，整个切换就静默失败，连控制台都不报错。
