:checked + label + ID 关联可行是因为单选按钮选中时触发 :checked 伪类，label[for] 精准关联对应 input 的 id，同 name 实现互斥；需确保 DOM 顺序为 input→label→内容区且同级，用 ~ 选择器控制显隐，纯 CSS 无重排，兼容键盘导航与无障碍。
为什么用 :checked + label + ID 关联是可行的
因为单选按钮（<input type="radio">）被选中时触发 :checked 伪类，而 label[for] 可以精确控制对应表单控件的状态，无需 JS 就能驱动样式切换。关键在于：所有 radio 必须同名（name），且每个 label 的 for 值必须严格匹配对应 input 的 id。
常见错误现象：label 点击无反应 → 检查 for 和 id 是否拼写一致、是否遗漏 name 属性、是否被其他 CSS 阻止了点击穿透（如 pointer-events: none）。
-
input必须放在label外部或内部（若在内部，可省略for） - 推荐把
input隐藏（position: absolute; opacity: 0），避免默认样式干扰布局 - Tab 切换依赖兄弟选择器（
~）或相邻兄弟选择器（+）定位内容区，所以内容容器必须在对应input后面的 DOM 顺序中
如何用 ~ 选择器控制多个 Tab 内容显隐
~ 是通用兄弟选择器，只要目标元素在已选中 input:checked 元素之后、且在同一父级下，就能命中。这是实现多 Tab 的核心机制。
使用场景：Tab 标签和内容区都平铺在同一个容器内，例如 <div class="tabs"> 包裹所有 input、label 和 section。
立即学习“前端免费学习笔记（深入）”；
性能影响：纯 CSS 实现无重排开销，但需注意，若内容区过多，CSS 规则会线性增长（每个 Tab 需单独写一条 input#tab1:checked ~ .content-1 类型规则）。
- 每个 Tab 内容区需有唯一 class 或 ID，例如
class="content content-1" - 每条显示规则形如：
input#tab1:checked ~ .content-1 { display: block; } - 默认所有内容区设为
display: none，只让当前选中的显示 - 不支持嵌套层级过深的内容区——
~只找同级后续兄弟，不跨层
为什么不能只用 :focus 或 :hover 替代 :checked
:focus 在失去焦点后状态即消失，无法维持“当前选中”态；:hover 仅响应鼠标悬停，不兼容键盘操作（Tab 键导航）且离开即关闭。而 :checked 是持久状态，天然适配可访问性（screen reader 能识别 radio 状态）。
容易踩的坑：input[type="checkbox"] 虽也支持 :checked，但多选行为会导致多个 Tab 同时激活——必须用 radio 并统一 name 才能互斥。
- 键盘用户按
Tab进入 radio 组，用方向键切换，Space确认，完全无障碍 - 若误用
checkbox，需额外用 CSS 排除非目标项（如:not(:checked) ~ .content），逻辑复杂且不可靠 -
:checked在 Safari 旧版本（≤15.4）中对隐藏 radio 的支持偶有 bug，建议加visibility: hidden而非仅opacity: 0
实际 HTML 结构与最小可用 CSS 示例
结构必须保证 input → label → 内容区 的 DOM 顺序，且所有元素同级。下面是最简可运行片段：
<div class="tabs"> <input type="radio" name="tab" id="tab1" checked> <label for="tab1">首页</label> <input type="radio" name="tab" id="tab2"> <label for="tab2">关于</label> <section class="content content-1">这里是首页内容</section> <section class="content content-2">这里是关于内容</section> </div>
CSS 关键部分：
.tabs input { position: absolute; opacity: 0; }
.tabs label { display: inline-block; padding: 8px 16px; cursor: pointer; }
.content { display: none; }
#tab1:checked ~ .content-1,
#tab2:checked ~ .content-2 { display: block; }
注意：如果内容区不是紧邻 input 后面（比如中间插了其他 label），~ 仍有效；但若内容区被包进另一个 div，就必须把该 div 也作为选择器目标，否则无法穿透。
