纯 CSS Tab 切换应使用 input[type="radio"] + :checked 方案，核心是统一 name、精准匹配 id/for 及相邻选择器（+ 或 ~），避免用 :target 或 :has() 以保兼容性与可访问性。
用 input[type="radio"] + :checked 控制 Tab 显示隐藏
纯 CSS 实现 Tab 切换，核心是把 radio 按钮和内容块绑定，靠 :checked 触发样式变化。关键不是“怎么写漂亮”，而是“怎么让点击标签真能切换内容”——必须保证同一组 radio 的 name 一致，且每个 id 和对应 for 或 ~ / + 选择器严格匹配。
常见错误现象：click 无反应、多个 tab 同时展开、切换后内容不更新。90% 是因为：name 不统一，或选择器没选中目标内容块。
- 所有 radio 必须有相同
name（如name="tab"），否则无法互斥 - 内容块需紧跟对应 radio 后（用
+）或在同一父容器内（用~），不能跨层级嵌套 - 初始状态靠给第一个 radio 加
checked属性实现，别只靠 CSS 模拟 - 不要用
display: none直接隐藏内容块——它会破坏可访问性；改用visibility: hidden; height: 0; overflow: hidden;更稳妥
为什么不用 :target 或 :has()
:target 看似简单，但依赖 URL hash，刷新就丢失状态，也不支持默认选中；:has() 虽能反向选择，但目前在 Safari 旧版和部分安卓 WebView 中不支持，且性能开销大，CSS 引擎需遍历子树判断。
而 :checked 兼容性极好（IE9+），逻辑清晰，浏览器原生优化到位。真正的问题在于结构约束强——你得接受“radio 必须在内容块前面”这个事实。
立即学习“前端免费学习笔记（深入）”；
-
:target适合单页锚点跳转，不适合多 tab 状态管理 -
:has()写法像label:has(input:checked) ~ .panel，但 Safari 15.4 之前不支持，iOS 15.4 以下直接失效 - radio 方案里，
label的for属性必须指向 radio 的id，漏写或拼错就点不动
~ 和 + 选择器的实际差异
两者都用于关联 radio 和内容块，但行为不同：+ 只匹配**紧邻下一个兄弟元素**，~ 匹配**后续所有同级兄弟元素**。这意味着：如果中间插了其他标签（比如说明文字、分割线），+ 就失效，~ 还能工作。
示例结构：
<input type="radio" name="tab" id="tab1" checked> <label for="tab1">首页</label> <div class="panel">…</div> <input type="radio" name="tab" id="tab2"> <label for="tab2">关于</label> <div class="panel">…</div>
对应 CSS：
.panel { display: none; }
#tab1:checked ~ .panel:nth-of-type(1),
#tab2:checked ~ .panel:nth-of-type(2) { display: block; }
- 用
+更精准，但结构脆弱；用~更宽松，但要靠:nth-of-type或类名区分内容块 - 别用
input:checked + .panel去匹配所有 panel——它只会选中第一个 radio 后面那个，不是“当前选中的那个” - 如果内容块用了
position: absolute，记得给父容器加position: relative，否则定位会飘
移动端点击区域小、响应延迟怎么办
原生 radio 默认尺寸很小，iOS 和 Android 上点击容易失焦，尤其手指操作时。这不是 CSS 能完全解决的，但可以绕过：
- 把
input设为opacity: 0; position: absolute;，用label承担点击区域 - 给
label加padding和cursor: pointer，视觉反馈更明确 - 避免在 label 里再嵌套
span或div——某些安卓 WebView 对嵌套 label 的事件冒泡处理异常 - 测试时务必在真机上点，模拟器可能掩盖
touchstart和click300ms 延迟问题；必要时加ontouchstart=""空属性触发 fastclick 行为
最常被忽略的一点：radio 的 id 和 label 的 for 值必须完全一致，包括大小写和连字符。少一个字母，整个 Tab 就废掉。写完立刻检查这两处是否对得上。
