纯 css 可实现标签页切换，但仅限视觉控制：:target 依赖 url 锚点且不支持过渡，需处理首次显示和滚动问题；:checked 基于 radio，无跳转、可动画、可键盘操作，但结构受限；二者均无法监听事件、加载动态内容或同步 url。
纯 CSS 能实现标签页切换样式，但必须明确：它只能控制视觉状态和内容显隐，不能监听切换事件、不支持动态内容加载、也不处理 URL 同步。选 :target 还是 :checked，取决于你是否需要锚点跳转、是否接受 radio 结构、以及是否在意 SEO 和可访问性。
用 :target 实现带 URL 锚点的切换
点击标签会改变 URL hash（如 #tab2），浏览器自动滚动到对应元素——这点常被忽略，导致内容被顶部遮挡或页面跳动。
-
href必须写成#id形式，不能是javascript:void(0)或/#tab2（后者会刷新） - 所有面板默认隐藏：
.tab-content { display: none; }，再靠.tab-content:target { display: block; }显形 - 首次加载时没 hash，所有面板都不可见，得补一条：
.tab-content:first-of-type { display: block; }或#tab1:not(:target) { display: block; } -
:target不支持过渡动画（transition对display无效），想加淡入效果得改用opacity+visibility组合，但需额外控制pointer-events避免点击穿透
用 :checked + radio 实现无跳转的切换
结构更重，但体验更接近真实 Tab 组件：不滚动、可加过渡、默认选中可控，且 label 点击天然支持键盘 Enter/Space。
-
input[type="radio"]必须放在label和内容块之前，否则~兄弟选择器无法匹配后续内容 - 每个
radio的name属性要一致，id和label[for]必须严格对应 - 显示逻辑靠组合选择器：
#tab1:checked ~ #content1 { display: block; }，注意这里依赖 DOM 顺序，不能把内容块提前 - 隐藏 radio 的方式推荐
display: none，避免用opacity: 0或负定位——前者影响可访问性，后者可能触发意外重排
样式美化时容易忽略的细节
标签高亮、边框衔接、过渡平滑这些看似简单，实际踩坑最多。
- 选中标签的下边框要盖住内容区上边框，得调
z-index并确保父容器不是position: static - 用
max-height做展开动画比height更安全，但别设过大值（如max-height: 1000px），末尾会明显拖慢；建议按内容预估，或用fit-content+overflow: hidden - 标签用
flex布局对齐时，label要设flex: 1或固定width，否则在小屏下文字换行会破坏对齐 - 如果内容区高度差异大，
transition: height会因像素值不确定而失效，此时改用opacity+transform: translateY()更可靠
真正上线时，:target 适合文档类静态页，:checked 更适合交互密集的管理后台；但只要涉及表单、动态数据、键盘导航或焦点管理，还是得交给 JavaScript——CSS 只负责“看起来像”，不负责“能用”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
