CSS :target伪类如何实现单页应用的页面跳转_利用ID锚点模拟路由切换-css教程-PHP中文网

:target 在 react/vue 中失效的根本原因是框架路由使用 pushstate 改变 url，不触发原生 fragment 导航，仅直接赋值 location.hash 才能激活 :target；id 与 href 必须严格一致，且推荐用 visibility/opacity 实现过渡动画。

css :target伪类如何实现单页应用的页面跳转_利用id锚点模拟路由切换

为什么 :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 回车，观察是否立刻生效。

Skill Weave Chains — 技能链路由引擎

开箱即用的技能链路由引擎。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，极易错乱。

正确做法是：