首次打开无hash时:target不匹配导致全空白，需用section:first-of-type{display:block}兜底；失效主因是href错误、DOM未就绪或id与hash不严格一致；SPA中须用window.location.hash而非pushState触发。
为什么 :target 切换标签页时页面一片空白
首次打开页面没带 hash（比如 #tab1），:target 就不匹配任何元素，所有面板都隐藏——这是最常见“全黑”原因。不是 CSS 写错了，是默认状态没兜底。
必须显式让第一个面板可见，靠这条规则：section:first-of-type { display: block; }。但前提是所有面板得是同级、同类型元素（比如全是 <section>），且顺序固定。如果用 <div> 混搭或加了 wrapper 容器，:first-of-type 就可能选错目标。
- 别只写
section:not(:target) { display: none; }，它会让所有面板默认不可见 - 确保面板元素在 DOM 中已存在，不要等 JS 动态插入后再指望
:target生效 - 服务端渲染时可直接输出
location.hash = "#tab1"，或前端 onload 里补一句（仅一次）
href="#tab1" 不生效的三个硬性断点
:target 只响应浏览器原生 hash 导航，不是所有“看起来像跳转”的操作都能触发它。失效基本卡在这三处：
-
href值写成javascript:void(0)或/#tab1（开头多斜杠）——前者无 hash 变更，后者强制整页刷新 - 目标元素还没挂载进 DOM，比如 Vue/React 中用
v-if或{show && <section id="tab1">}控制渲染，id 属性实际不存在 - id 和 hash 不严格一致：大小写敏感（
tab1≠Tab1）、含空格（id="user info"）、用了属性选择器（[id="tab1"]）而非真实id属性
检查方法很简单：手动在地址栏输入 #tab1 回车，看是否生效。如果手动输可以、点击链接不行，问题一定出在 href 或 DOM 渲染时机上。
立即学习“前端免费学习笔记（深入）”；
display: none 导致布局跳动怎么办
直接用 display: none + :target { display: block; } 最简，但会触发布局重排：隐藏时元素彻底退出流式布局，其他内容上移；显示时又突然挤下来，视觉上“一抖”。
更稳的做法是用 visibility: hidden 配合定位移出视口，既保持占位、避免重排，又不影响可访问性：
section {
visibility: hidden;
position: absolute;
left: -9999px;
}
section:target {
visibility: visible;
position: static;
left: auto;
}
若要加淡入动画，再叠一层 opacity：
- 基础样式设
opacity: 0; transition: opacity 0.2s; -
:target中设opacity: 1; - 避免用
height: 0; overflow: hidden;，它无法过渡，切换时仍可能闪
SPA 路由中 :target 完全失灵怎么救
React Router、Vue Router 默认用 pushState 改 URL，不改 hash，:target 根本收不到信号——这不是 bug，是设计如此。
最轻量解法是主动写 hash：window.location.hash = "#tab2"，它会触发 :target 并自动滚动，兼容性好、无额外依赖。
- Vue Router：用
router.push({ hash: "tab2" })替代router.push("/#tab2") - React Router v6.4+：用
useNavigate("#tab2") - 动态渲染面板时，确保组件
mount后id已写死在 DOM 上，别等异步数据回来再setAttribute("id", ...)
别在 useEffect 里调 scrollIntoView 试图“模拟” :target——它只滚动，不触发样式，面板依然黑着。
