:target 在 React/Vue 中失效的根本原因是框架路由使用 pushState 改变 URL，不触发原生 fragment 导航，仅直接赋值 location.hash 才能激活 :target；ID 与 href 必须严格一致，且推荐用 visibility/opacity 实现过渡动画。
为什么 :target 在 React/Vue 里点不动
根本原因是框架路由（比如 router.push 或 useNavigate）默认用 pushState 改 URL，不触发浏览器原生 fragment 导航，:target 就不会更新。它只认 location.hash = "#tab2" 这种直接赋值，不是监听 history 变更。
常见错误现象：
- 点击链接后地址栏变了，但对应
div#tab2没显示 - 控制台没报错，CSS 规则也写了，
div:target { display: block; }就是不生效 - 用
useEffect监听location.hash并调用scrollIntoView，结果样式闪一下又没了
实操建议：
- 在组件内改用
window.location.hash = "#tab2"替代框架的导航方法（前提是不需要 SSR 或 SEO 支持） - 如果必须用
router.push，得补一句location.replace("#" + id)强制刷新 hash，但注意这会多一条历史记录 - 别在挂载后异步渲染带
id的 tab 面板——:target 匹配发生在 DOM ready 后，面板还没出来就匹配失败
id 和 href 必须完全一致，大小写、空格、编码都不能错
:target 不做模糊匹配，也不自动解码。href="#faq" 只能匹配 id="faq"，不能匹配 id="FAQ"、id=" faq" 或 id="faq-1"。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- Vue/React 组件里动态生成
id，不小心加了空格或前缀（如id="tab-{{i}}"→id="tab- 2"） - 用中文或特殊字符作 ID，没做 URL 编码（
href="#使用说明"应为href="%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E"，但更推荐用英文 ID） - ID 以数字开头（
id="1-intro"是非法 HTML5 ID，浏览器可能忽略，应改为id="section-1"）
调试方法：打开 DevTools → Elements 面板，直接搜 :target，看是否高亮；再手动在地址栏输 #tab2 回车，观察是否立刻生效。
开箱即用的技能链路由引擎。13 条预定义链覆盖搜索、开发、审查、MLOps、法律、创意等场景，三层路由架构（触发词→SAD反馈→DAG编排），recall@10=96.97%。配置驱动（chains.yaml），零代码扩展。pip install skill-weave-chains 一键安装。
display: none + :target 不适合动画，换 visibility + opacity
display 是不可过渡属性，写 transition: display 0.3s 完全无效。而且 display: none 会让元素脱离文档流，可能引发布局跳变或父容器高度塌陷。
推荐组合：
- 所有面板设
visibility: hidden; opacity: 0; position: absolute; left: -9999px; - :target 元素加
visibility: visible; opacity: 1; position: static; left: auto; transition: opacity 0.2s; - 避免用
height: 0 → height: auto做过渡——CSS 不支持auto的动画
这样既保持 DOM 存在、可访问性良好，又不会影响滚动锚点定位，还兼容旧版 Safari 对 :target 动画的支持问题。
SPA 中别依赖 :not(:target) 控制其他面板
很多人写 .tab-panel:not(:target) { display: none; }，以为能“反选隐藏”，但这是错的。因为 :not(:target) 优先级低于显式声明（比如某个面板被 JS 加了 style="display: block"），也压不过父容器的 overflow: hidden，极易错乱。
正确做法是：
- 统一初始状态：
.tab-panel { display: none; } - 只靠
.tab-panel:target { display: block; }显式激活一个 - 若需默认显示第一个，加
.tab-panel:first-of-type { display: block; }，但注意它会被 :target 覆盖
复杂点在于：:target 本身不提供“取消前一个”的能力，它只是响应当前 hash。所以切换时旧面板消失、新面板出现，全靠 CSS 层级和重绘顺序，没有中间态。这点容易被忽略，尤其在需要过渡衔接或状态同步的场景下。
