能，但必须满足三个硬性条件：同name、label正确绑定、radio在面板之前或通过属性间接控制；否则:checked选择器无效。
能，但必须满足三个硬性条件：同 name、label 正确绑定、radio 在面板之前或通过属性间接控制；否则:checked 选择器根本不会生效。
radio + :checked 实现标签页的结构约束
纯 CSS 标签页依赖浏览器对 :checked 的实时响应，而这个响应只在特定 DOM 关系下触发：
- 所有
<input type="radio">必须有相同的name值（如name="tabs"），否则互斥逻辑失效，多个可同时选中 - 每个
radio必须有唯一id，对应<label for="xxx">才能点击标题触发状态变更；写错for或漏id，点击无反应 -
radio元素必须位于目标面板元素的**前面**（同一父容器内），才能用~（后续兄弟）或+（紧邻兄弟）选择器匹配到面板；放后面就完全失联 - 第一个
radio必须带checked属性，否则初始无面板显示，页面白屏
为什么 display: none 隐藏 radio 会导致屏幕阅读器跳过？
把 radio 设为 display: none 后，它从渲染树中彻底移除，辅助技术无法感知其存在——用户按 Tab 键时直接越过，失去键盘操作入口。
- 正确做法是用视觉隐藏但保留语义：
position: absolute; clip: rect(0 0 0 0);或width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; - 同时确保
<label>是可聚焦的（默认支持），且包裹文字或图标区域足够大（移动端至少44×44px） - 别给
label加tabindex，它原生可聚焦；加了反而可能破坏焦点顺序
面板显隐该用 display 还是 visibility？
二者行为差异直接影响资源和无障碍：
立即学习“前端免费学习笔记（深入）”；
-
display: none：内部<iframe>、<video>、<audio>会暂停加载/播放，表单值不保留；适合静态内容 -
visibility: hidden：元素仍占布局空间，需配合position: absolute避免空白；资源持续运行，适合需保持状态的表单或轮播图 - 无论哪种，都必须同步设置
hidden属性或aria-hidden="true"，否则屏幕阅读器仍可能读取隐藏内容 - 切换时记得更新
tabindex和aria-hidden：激活面板设tabindex="0"并aria-hidden="false"，其他设tabindex="-1"和aria-hidden="true"
如何让 tab 标题和面板不在同一层 DOM 中？
实际布局常要求页头在 <header>、面板在 <main>，此时无法靠 ~ 直接关联。必须引入中间映射：
- 把所有
radio放进一个隐藏容器（如<div class="tab-switchers" aria-hidden="true">），确保它们仍在公共祖先内且位置靠前 - 每个
radio设id="tab-home"，对应面板设data-tab="tab-home" - CSS 写成：
input#tab-home:checked ~ [data-tab="tab-home"] { display: block; } - 关键点：
~只能向后找，所以radio容器必须出现在面板容器的前面，哪怕只是逻辑上而非视觉上
最易被忽略的是：纯 :checked 方案完全不支持键盘方向键切换，也无法用 URL 锚点定位到某页签——如果项目需要无障碍或 SEO，这部分必须用 JS 补齐，不能只靠 CSS。
