必须用 radio 而不是 checkbox，因选项卡需互斥激活；同名 radio 的 :checked 状态由浏览器原生保证单选，而 checkbox 无此机制，css 无法反选，易致多面板同时显示。
纯 CSS 实现选项卡切换完全可行，但必须用 <input type="radio">，不能用 <input type="checkbox"> —— 否则多个面板会同时显示，这是最常踩的坑。
为什么必须用 radio 而不是 checkbox
选项卡是互斥状态：同一时间只能有一个激活。浏览器对同名 radio 的 :checked 状态有原生互斥逻辑，选中一个自动取消其他；而 checkbox 没这机制，靠 CSS 无法“反选”已勾选项。
- 用
checkbox写完发现点第二个标签时第一个内容还在，就是卡在这儿 -
name属性必须一致，比如都设为name="tab"，否则互斥失效 - 所有
radio必须在同一个父容器内，否则兄弟选择器找不到目标元素
:checked ~ .content 和 :checked + .content 怎么选
关键看 HTML 结构里内容块（.content）和 radio 的相对位置：
- 如果
.content紧跟在<input>后面（中间没其他元素），可用:checked + .content，更精准、性能略优 - 但实际常用结构是
<input> → <label> → ... → <div class="content">，中间隔了标签，这时必须用 <code>:checked ~ .content -
~是通用兄弟选择器，匹配后面**所有同级**的.content，所以建议加父容器 class 限定范围，比如.tabs-container input:checked ~ .content - 给
radio加position: absolute; opacity: 0; width: 0; height: 0; margin: 0; - 用
<label for="xxx"></label>绑定点击区域，确保用户点标签就能触发选中 - 默认展开靠 HTML 中写
checked属性，比如<input type="radio" name="tab" id="tab1" checked> - 给
label设置足够大的padding或min-height，扩大点击热区 - 避免用
height动画（触发布局重排），改用opacity+transform - 给内容块统一加
transition: opacity 0.2s ease, transform 0.2s ease;，并在:checked ~ .content里设opacity: 1; transform: translateY(0); - 别忘了加
overflow: hidden到父容器，防止内容撑开布局抖动
如何隐藏 radio 又不破坏可访问性
不能用 display: none 或 visibility: hidden，否则屏幕阅读器和键盘焦点会丢失。正确做法是视觉隐藏但保留交互能力：
移动端和动画要注意什么
纯 CSS 方案在移动端容易点不准，动画也可能卡顿：
真正麻烦的不是写法，而是结构顺序和选择器匹配关系——哪怕多一个包裹 <div>，<code>~ 就可能跨不出去，+ 更直接失效。调试时打开开发者工具，逐层检查元素是否真为同级兄弟，比反复改 CSS 有效得多。
