:target 不能构建 SPA 路由，因其仅响应真实 hash 变更（如 location.hash = "#tab2"），不监听 pushState 等 history API；生效需三步：显式赋值 hash、确保目标元素已挂载且 ID 精确匹配、避免 display:none 而用 visibility + opacity 实现平滑切换。
:target 不能直接构建 SPA 路由，它只响应浏览器原生 hash 变更，不响应 React Router、Vue Router 的 pushState 或 replaceState。 想靠纯 CSS 实现“路由切换”，必须绕过框架抽象层，让浏览器真正导航到 #id —— 否则样式不会触发，面板不会显示，滚动也不会发生。
为什么 router.push("/page#tab2") 不触发 :target
React Router 的 router.push()、Vue Router 的 router.push() 或原生 history.pushState() 默认只改 URL 路径，不更新 location.hash。而 :target 完全不监听 history API，只认地址栏中 # 后面的 fragment 是否真实变更。
- 执行
history.pushState({}, "", "/page#tab2")后，location.hash仍是空字符串（除非你显式赋值） - 即使 URL 显示为
/page#tab2，若location.hash === ""，:target就不匹配任何元素 - 检查方式：在控制台输入
location.hash，看返回值是不是"#tab2"
怎样让 :target 真正生效（实操三步）
最轻量、兼容性最好、且 100% 触发 :target 的方式是直接操作 location.hash：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 用
window.location.hash = "#tab2"替代所有框架路由跳转——它会同步更新 hash、触发:target、自动滚动，且无需 polyfill - 确保目标元素已挂载：不要在
useEffect或mounted钩子里异步插入<div id="tab2">，否则 DOM ready 时没这个 id，匹配失败 - ID 必须完全一致：大小写敏感、不能有空格或点号（如
id="user.profile"会导致选择器解析失败；应改为id="user-profile"）
:target 面板显示策略别踩 display:none 这个坑
用 display: none + :target { display: block } 看似简单，但实际会导致布局抖动、屏幕阅读器跳过内容、SEO 不友好，且无法做过渡动画。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：
.panel { visibility: hidden; opacity: 0; position: absolute; left: -9999px; transition: opacity 0.2s; } .panel:target { visibility: visible; opacity: 1; position: static; left: auto; }- 如果页面有固定头部，记得给目标元素加
scroll-margin-top: 64px（写在#tab2元素上，不是父容器） - 平滑滚动需额外声明：
html { scroll-behavior: smooth; }，仅写在body上无效
真正难的不是写出 :target 规则，而是保证「hash 变更 → DOM 存在 → ID 匹配 → 样式命中」这条链路每一环都稳。SPA 中多数失效，问题不在 CSS，在 JS 层是否真正交出了 hash 控制权。
