:target在SPA中不生效的根本原因是浏览器未真正导航到锚点，仅响应hash原生变更；React/Vue的路由API如pushState默认不触发该行为，需手动设置window.location.hash或补scrollIntoView。
:target 为什么在 SPA 里经常不生效
根本原因不是 CSS 写错了，而是浏览器没真正“导航”到那个锚点。:target 只响应地址栏 hash 的原生变更，比如点击 <a href="#tab2"></a> 或执行 window.location.hash = "#tab2"；但 React/Vue 里的 router.push() 或 history.pushState() 默认不触发这个行为，所以 :target 始终不匹配。
常见断链点有三个：
- JS 路由更新了 URL，但没改
location.hash（比如用了pushState({},"","/path#tab2")却没同步写 hash） - 目标元素的
id和当前 hash 不完全一致（大小写、空格、中文、点号或冒号未转义） - 面板是异步渲染的（比如组件挂载后才
useState插入<div id="tab2">），DOM ready 时还没这个 id，:target 匹配失败 <h3>怎么让 :target 在 React/Vue 里真正触发</h3> <p>最轻量可靠的方式是绕过路由抽象层，直接操作 hash：</p> <ul> <li>用 <code>window.location.hash = "#tab2"替代框架的router.push()—— 它会触发 :target + 自动滚动，且兼容所有现代浏览器 - 如果必须用
history.pushState()，得额外补一句location.replace("#" + id)（避免多一条历史记录）或调用document.getElementById(id)?.scrollIntoView()做视觉兜底 - React 中可在
useEffect里监听location.hash变化，确保目标元素已挂载后再触发 scroll，但别指望它激活 :target 样式
:target 面板显示策略该用 display 还是 visibility
别用 display: none 配合 :target { display: block } —— display 切换会触发回流，且无法过渡，容易闪屏或布局抖动。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
.tab-panel { visibility: hidden; position: absolute; left: -9999px; }+.tab-panel:target { visibility: visible; position: static; left: auto; } - 这样保持 DOM 存在、可访问、不占流式布局，也规避了 Safari 对
display: contents下 :target 的支持问题 - 如需淡入，加
opacity: 0和transition: opacity 0.2s到基础样式，:target 里设opacity: 1；注意 transition 必须写在基础选择器里，不能只写在 :target 中
锚点 ID 和滚动体验的硬性约束
:target 匹配严格区分大小写，且只认合法 HTML5 id —— 以字母或下划线开头，后续可用字母、数字、连字符（-）、下划线（_），但冒号（:）和点号（.）在 CSS 选择器中需转义，而 :target 不支持转义写法，实际应避开。
- 安全写法：全小写 + 连字符，如
id="user-profile"、href="#user-profile" - 平滑滚动必须写在
上：html { scroll-behavior: smooth; }，写在上部分 Safari 版本会失效 - 避免顶部固定导航遮挡目标元素，加
scroll-margin-top: 60px到 :target 元素上（不是 body 或 html）
最易被忽略的是：:target 是瞬时状态，不是事件，它不触发重绘也不支持 height: auto 过渡；所有动画都得靠 opacity、transform、visibility 这类可过渡属性来构造视觉差。
