display: none 会导致布局塌陷和内容跳动，因其完全移出文档流，浏览器无法预留空间，切换时触发重排且影响可访问性；应改用 visibility: hidden; opacity: 0 组合保留占位。
为什么直接写 .panel { display: none; } + .panel:target { display: block; } 会出问题
这种写法看似最直白，但实际会导致页面布局塌陷、内容跳动，尤其当面板高度不一致时。因为 display: none 完全移出文档流，浏览器无法预留空间；切换瞬间重排（reflow）明显，可访问性也差——屏幕阅读器可能跳过被 display: none 隐藏的内容。
更稳的做法是用 visibility 和 opacity 组合，保留占位：
-
.panel设为visibility: hidden; opacity: 0; transition: opacity 0.25s; -
.panel:target设为visibility: visible; opacity: 1; - 避免用
position: absolute除非你真需要脱离文档流——它会让父容器高度坍缩，影响其他元素布局
HTML结构里 id 和 href 必须完全一致，包括大小写和连字符
这是 :target 失效最常见的原因。浏览器匹配是严格字符串比对，不忽略空格、不转换大小写、不标准化连字符或下划线。
比如：<a href="#user-profile">用户档案</a> 必须对应 <div id="user-profile">，而不是 id="userProfile" 或 id="user_profile"。
立即学习“前端免费学习笔记（深入）”；
常见错误场景：
- Vue/React 模板中用
v-bind:id="`tab-${index}`"生成了id="tab-0"，但链接写的是href="#Tab0" - 服务端渲染时模板漏掉了某个
id，导致首次加载无匹配元素，:target 永远不触发 - 使用了
data-id当作目标，但 :target 只认原生id属性
如何让第一个标签页默认展开，且不依赖 JS 初始化
:target 不会主动“选中”任何东西——没有 hash 就没 :target。所以纯静态页面想默认展开第一个 tab，必须让初始 URL 带上对应 fragment。
有两种实操路径：
- 服务端层面：输出 HTML 时，把
<link rel="canonical" href="?tab=1">改成带 hash 的地址，例如直接返回https://example.com/page.html#tab1 - 前端兜底（轻量）：在
<head>里加一行<script>location.hash || (location.hash = '#tab1');</script>—— 它只执行一次，不干扰后续 :target 行为，且不影响 SEO - 别用
history.pushState()替代：它不会触发 :target，除非你额外补一句location.hash = '#tab1'
移动端 Safari 对 :target 的滚动和重绘有延迟，怎么缓解
点击 tab 后内容出现，但页面没自动滚到对应位置，或者淡入动画卡顿一帧，多见于 iOS Safari（尤其是旧版）。这不是 CSS 写错了，是浏览器对 fragment 导航的 scroll-behavior 实现不一致。
关键修复点：
- 给每个 panel 加
scroll-margin-top: 60px;（数值按你的固定头部高度调），防止内容被导航栏遮住 - 避免在 :target 规则里同时写
transform和opacity动画——Safari 对复合属性重绘调度不稳定，优先用opacity+visibility - 如果用了
position: absolute布局，确保父容器有position: relative，否则scrollIntoView()行为不可控（虽然 :target 本身不调这个，但用户手动滚动时会受影响）
真正麻烦的不是写法，而是思维惯性：总想用 JS 控制“状态”，但 :target 的本质是响应 URL，不是管理组件生命周期。只要 hash 变了、DOM 存在、ID 对得上，它就一定生效——其余都是围绕这三点做容错和体验微调。
