直接用display:none切换标签内容会出问题，因其使元素彻底脱离渲染流程，导致动画失效、屏幕阅读器跳过、DOM重置、布局抖动且无法过渡；:target需锚点匹配且无初始状态处理，故须配合visibility+transform等可过渡属性或radio:checked方案实现平滑切换。
直接用 display: none 切换标签内容会出问题——它让元素彻底退出渲染流程，导致动画失效、屏幕阅读器跳过、DOM 重置、布局抖动，且无法过渡。
为什么不能只靠 display: none + :target
很多人写完 .tab-content { display: none; } 和 .tab-content:target { display: block; } 就以为完事了，结果首次加载页面一片空白，或点击后内容堆叠显示。根本原因是：
- 没处理初始状态：URL 没带锚点（如
page.html而非page.html#tab1）时，:target不匹配任何元素，所有面板都不可见 - 没设默认显隐逻辑：必须额外加一条
.tab-content:first-of-type { display: block; }，否则首屏无内容 - 标签高亮无法靠
a:target实现——:target匹配的是目标<section id="tab1">，不是链接本身；若想高亮对应<a>，得把链接和内容放在同一容器里，或改用 JS -
:target下无法触发transition：opacity、transform 等属性在:target规则中写无效，这是浏览器限制
visibility + transform 是唯一能过渡的组合
要实现平滑滑动效果，必须放弃 display，改用保留占位、支持过渡的属性组合：
- 所有面板初始设为
visibility: hidden; position: absolute; top: 0; left: 0;，父容器加position: relative - 激活面板用
visibility: visible; transform: translateX(0);，未激活用transform: translateX(-100%);（注意单位，必须是translateX(-100%)，不是translate(-100%)） -
transition必须显式包含visibility：例如transition: transform 0.3s ease, visibility 0.3s；只写transition: all不可靠 - 避免用
height或max-height过渡：前者需精确像素值，后者设大了末尾变慢，且都易引发重排
用 input[type="radio"] + :checked 更可控但结构敏感
这是目前最稳定、可动画、能默认选中的纯 CSS 方案，但 DOM 顺序和选择器写法稍有差池就失效：
立即学习“前端免费学习笔记（深入）”；
-
<input>必须隐藏，但不能用display: none（会导致某些浏览器失去焦点能力），推荐position: absolute; clip: rect(0 0 0 0); -
<label>必须紧跟对应<input>后，中间不能插其他标签，否则input:checked + label失效 - 内容区要用通用兄弟选择器
~，如#tab1:checked ~ #content1，意味着#content1必须在同一个父容器内、且在所有<input>之后 - 所有
<input>的name属性必须相同（如name="tabs"），否则无法互斥；默认选中只靠给其中一个加checked属性
真正难的不是写对一行 transition，而是确保所有面板初始状态统一、DOM 顺序严格、伪类匹配路径无歧义——这些细节一漏，整个切换就卡顿、错位或静默失败。
