只能用 radio 而非 checkbox，因其天然单选互斥，配合相同 name 可确保一次仅显示一个标签页；dom 中内容必须紧邻对应 radio 后，方能通过 :checked + 或 ~ 触发切换。
可以，但必须用 <input type="radio"> 配合 :checked + 相邻兄弟选择器（+）或通用兄弟选择器（~），且标签页内容需在 DOM 中紧邻对应 radio 元素之后——否则无法触发显示切换。
为什么只能用 radio，不能用 checkbox
因为 :checked 对 checkbox 无互斥性，多个可同时选中，会导致多个标签页内容同时显示；而 radio 组天然单选，配合相同 name 属性才能保证“一次只开一个”。
-
checkbox适合做「多选筛选」，不适合「单页切换」 - 所有
<input type="radio">必须有相同的name值，例如name="tab" - 每个
radio应带唯一id，用于关联<label></label>的for属性
DOM 结构必须满足兄弟关系才能用 + 或 ~
CSS 无法向上选择父元素或跨级定位，所以内容区域必须紧跟在对应 radio 后面（用 +）或在其后任意位置（用 ~），且在同一层级。
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- 推荐结构：
<input>→<label></label>→<section></section>，用input:checked + label + section控制显示 - 若内容块在更深层（如嵌套在
<div class="tabs-container"> 内），则需把 <code>radio移到同级容器顶部，否则无法命中 -
~虽更宽松，但会匹配所有后续同类兄弟，若中间插入其他section可能误显——务必控制结构干净 - 用
opacity: 0/1+visibility: hidden/visible组合（visibility控制交互，opacity控制渐变） - 配合
transition: opacity 0.2s, visibility 0.2s（注意：visibility 本身不可过渡，但延迟生效可模拟） - 避免对
height做过渡——需要精确预设高度，不适用于动态内容 - 示例规则：
input#tab1:checked ~ .tab-content:nth-of-type(1) { opacity: 1; visibility: visible; }
:checked 切换时没有过渡动画？加 transition 没用
因为 display: none/block 不可过渡，直接切换会生硬闪现。必须改用可过渡的属性：
真正难的不是写对伪类，而是让 HTML 结构服从 CSS 选择器的限制；一旦 DOM 嵌套过深或顺序错位，:checked 就彻底失效——这时候加再多 !important 也没用。
