纯CSS标签页切换原理是利用radio的互斥选中特性与:checked伪类配合兄弟选择器控制面板显隐；需同名name、唯一value、同一父容器内DOM顺序合理，并设默认checked以避免空白。
用 <input type="radio"> 控制标签页显隐的原理
纯 CSS 实现标签页切换，核心是利用 radio 按钮的「互斥选中」特性 + :checked 伪类 + 相邻/后续兄弟选择器（~ 或 +）控制对应面板显示。它不依赖 JS，但要求所有 radio 和目标面板在 DOM 中满足可选择关系（通常放在同一父容器内）。
关键约束：每个 radio 的 name 必须相同，value 唯一；对应面板需有唯一标识（如 id），并通过 CSS 关联。
radio 标签页的 HTML 结构要点
结构顺序直接影响 CSS 可控性。推荐把 radio 放在最前（隐藏但保留语义），再放标签按钮（label），最后放内容区（section）。这样能用 input:checked ~ section#tab1 精准命中。
-
radio必须设id（用于label[for]绑定），且name一致（如name="tab"） -
label的for值必须严格匹配对应radio的id - 每个
section面板加id（如id="tab1"），CSS 通过input[value="tab1"]:checked ~ section#tab1显示 - 所有元素需在同一父级下，否则
~无法跨父级选择
CSS 显示/隐藏逻辑与常见翻车点
默认所有面板 display: none，仅当对应 radio 选中时设为 display: block（或 flex 等）。容易忽略的是「初始状态」——必须有一个 radio 默认 checked，否则首次加载无内容显示。
立即学习“前端免费学习笔记（深入）”；
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
典型错误：
- 忘记给第一个
radio加checked属性 → 页面空白 - 面板用了
visibility: hidden而非display: none→ 占据布局空间，导致页面错位 -
label写成<label><input></label>嵌套 → 会触发两次点击（input 自身 + label 事件冒泡），导致快速切换失效 - 用
+（紧邻兄弟）却隔了其他元素 → 选择器失效，改用~（后续兄弟）更稳妥
示例关键 CSS：
input[name="tab"] { display: none; }
input[value="tab1"]:checked ~ section#tab1,
input[value="tab2"]:checked ~ section#tab2 { display: block; }
section { display: none; }
无障碍与移动端适配注意事项
纯 CSS 方案对屏幕阅读器支持较弱：radio 隐藏后，部分读屏软件可能跳过标签按钮。建议至少保留 label 的可访问性属性：
- 给
label加role="tab"和aria-controls="tab1"（值为对应面板id） - 给面板加
role="tabpanel"和aria-labelledby="label-id" - 移动端需确保
label足够大（最小 44×44px），避免点击失焦 - 不要依赖
:hover做主要交互，它在触摸设备上不可靠
如果项目需要键盘导航（Tab 切换、空格选中）或复杂状态管理，JS 方案仍是更可控的选择——CSS 方案适合静态、轻量、对 JS 有强限制的场景。
