必须用单选按钮，因为选项卡互斥，:checked 对 checkbox 无法自动取消前项；需同 name、相邻结构、隐藏 input；默认展开靠 HTML 的 checked 属性；移动端需扩大点击区域并慎用动画。
用 :checked 控制选项卡显示，为什么必须用单选按钮（input[type="radio"]）？
因为 :checked 本身不支持 input[type="checkbox"] 的多选逻辑——选项卡是互斥的，只能有一个激活态。用 checkbox 会导致多个面板同时显示，或者需要额外 JS 干预状态同步，反而破坏了纯 CSS 方案的初衷。
真实场景中，很多人一开始用 checkbox 写，结果点击第二个标签时第一个没关闭，就是卡在这儿。
- 必须给所有 radio 设置相同的
name属性，比如name="tab"，否则浏览器不会自动取消前一个的选中态 - 每个
input需紧跟对应的label和目标内容区（或用for/id关联），否则:checked + .panel这类相邻兄弟选择器会失效 - 别忘了给
input加position: absolute; opacity: 0; width: 0;隐藏它但保留可交互性，不然默认 radio 样式会干扰布局
:checked ~ .panel 和 :checked + .panel 选哪个？
取决于 HTML 结构里内容区（.panel）和 input 的相对位置。如果 .panel 紧跟在 input 后面，用 + 更精准、性能略好；如果中间隔了 label 或其他元素，就得用 ~（通用兄弟选择器）。
常见错误是结构写成 input → label → panel，却还硬用 +，结果样式完全不生效——浏览器根本找不到“紧邻的下一个 .panel”。
立即学习“前端免费学习笔记（深入）”；
-
+只匹配**紧邻的下一个兄弟元素**，中间不能有任何其他标签 -
~匹配**后面所有同级的 .panel**，更宽松，但也可能误中其他无关区块，建议加更具体的父容器 class 限定范围 - 示例结构推荐：
<input type="radio" name="tab" id="tab1"> <label for="tab1">首页</label> <div class="panel">…</div>
这样:checked + .panel就能直接命中
如何让默认第一个选项卡展开？
靠给第一个 input 加 checked 属性，而不是靠 CSS 伪类模拟。CSS 无法“默认选中”，:checked 是响应式状态，只对已选中的输入生效。
容易忽略的一点：如果页面加载后 JS 动态修改了选中态（比如 URL 带 hash 切换），纯 CSS 方案就断连了——此时得配合 JS 或改用 :target 方案，但那就不是 :checked 的事了。
- 写死默认项：
<input type="radio" name="tab" id="tab1" checked> - 别用
:first-of-type或:nth-child(1)模拟默认，这些伪类不触发实际选中，:checked不会匹配 - 如果服务端渲染或框架里动态生成，确保初始 HTML 中对应
input确实带checked属性，而不是靠 JS 后补
移动端点击区域小、切换卡顿怎么办？
核心问题是隐藏 input 后，只有 label 文字可点，手指点不准；另外某些安卓 WebView 对 :checked 状态更新有微小延迟，看起来像卡顿。
这不是 CSS 能彻底解决的，但可以收窄问题范围：
- 把
label的padding设够（至少12px上下），或者用display: block让整行可点 - 避免在
.panel上写太多重绘属性（如box-shadow、filter），尤其开启transform: translateZ(0)强制硬件加速时，部分低端机反而更卡 - 别在
:checked ~ .panel里写animation: fadeIn 0.3s，动画会阻塞状态切换反馈；用opacity+transition更稳妥
真要兼容性拉满，还是得加一层薄 JS 监听 click 并 toggle class——纯 CSS 的 :checked 方案，本质是“降级可用”，不是“全场景最优”。
