不能。伪类:checked本身不能直接控制标签页显隐，需配合+或~选择器联动同级元素，且HTML结构必须满足三个硬性约束：radio类型、同name值、input-label-section同级紧邻。
伪类 :checked 能直接控制标签页显隐吗？
不能。它本身只响应复选框/单选框状态变化，但可以配合 ~（通用兄弟选择器）或 +（相邻兄弟选择器）联动其他元素——这是纯 CSS 标签页的核心前提。
关键在于：必须把 <input type="radio"> 放在对应 <section> 之前，且同级；否则选择器无法向上或跨层级匹配。
常见错误是把 radio 放进 label 里又没处理好结构，导致 :checked + section 失效。
HTML 结构必须满足哪些条件？
三个硬性约束缺一不可：
立即学习“Java免费学习笔记（深入）”；
-
<input>必须是type="radio"，且 name 相同（确保单选互斥） - 每个
<input>后面紧跟着对应的<label>和<section>，三者同级 -
<section>必须紧跟在对应<input>后面，或通过~匹配到后续所有同级<section>
示例结构：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
<input id="tab1" type="radio" name="tabs" checked> <label for="tab1">首页</label> <section>首页内容</section> <input id="tab2" type="radio" name="tabs"> <label for="tab2">关于</label> <section>关于内容</section>
:checked ~ section 和 :checked + section 怎么选？
区别在于匹配范围和 DOM 位置要求：
-
:checked + section：只匹配紧挨着的下一个<section>，最严格也最安全，适合“一个 radio → 一个 section”一一对应 -
:checked ~ section：匹配后面所有同级<section>，可用于隐藏其他 tab 内容，但需额外用:not(:checked) ~ section配合重置样式 - 别用
:checked > section—— radio 和 section 不是父子关系，无效
推荐优先用 +，结构清晰、行为可预测；用 ~ 时务必注意其他 section 是否被意外显示。
为什么切换后内容不消失？常见样式陷阱
根本原因是没正确重置未激活 tab 的 display 或 visibility。CSS 伪类不会自动清空样式，必须显式定义：
- 所有
section初始设为display: none，再对:checked + section设为display: block - 避免用
visibility: hidden—— 它仍占布局空间，可能撑开容器 - 如果用了
transition，确保display不参与动画（浏览器不支持），改用opacity+max-height或transform
典型写法：
section { display: none; }
input:checked + label + section { display: block; }
注意这里多了一层 + label +，因为 label 在 input 和 section 中间——结构决定选择器链。
最易被忽略的是 radio 的 checked 状态依赖 HTML 顺序和初始标记，一旦 DOM 动态插入或顺序错乱，整个机制就失效；调试时先检查控制台是否报选择器不匹配，再确认 input 是否真被选中（:checked 在 DevTools 中会高亮）。
