纯 CSS 的 :target 方案仅在静态结构+原生哈希跳转时可靠；SPA 或动态渲染中因 fragment 变更不触发、id 不匹配或元素异步挂载而失效，需改用 window.location.hash 或确保 DOM 就绪。
纯 CSS 的 :target 方案能快速实现响应式 Tab 切换，但只在「静态结构 + 原生哈希跳转」场景下真正可靠；一旦进入 SPA 或动态渲染环境，它大概率失效，不是写法错，而是触发链断了。
为什么点击后内容不显示？:target 匹配失败的三个硬条件
:target 不是监听器，它只在浏览器地址栏真实变更 fragment（即 #xxx）且 DOM 中存在**完全匹配的 id** 时才生效。常见断点：
-
href="#tab2"指向了<div class="tab2">——:target只认id，不认class或data-id - URL 是
#Tab2，但元素写的是id="tab2"—— 大小写必须严格一致 - Tab 面板由 React/Vue 异步挂载，页面初始无
id="tab2"元素 ——:target匹配发生在 DOM ready 后，没元素就永远不触发
如何避免 display: none 带来的可访问性与 SEO 问题
用 display: none 隐藏非激活 Tab 会导致屏幕阅读器跳过、搜索引擎无法索引、JS 获取不到 offsetHeight。更稳妥的视觉隐藏方式：
- 给所有面板设
visibility: hidden; position: absolute; left: -9999px; - 仅对
:target元素重置：visibility: visible; position: static; left: auto; - 若需淡入效果，加
opacity: 0; transition: opacity 0.2s;到基础样式，:target中设opacity: 1;
SPA 中让 :target 真正生效的实操路径
React/Vue 项目里，router.push("/page#tab2") 或 history.pushState() 默认不触发 :target。必须让浏览器“真跳”：
立即学习“前端免费学习笔记（深入）”；
- 改用
window.location.hash = "#tab2"—— 最轻量，兼容性好，会自动滚动并触发:target - 若必须用
pushState，得补一句location.replace("#" + id)或调用document.getElementById(id)?.scrollIntoView()做兜底（注意：后者不触发:target样式，仅解决滚动） - 确保组件挂载时已渲染带正确
id的面板，不要在useEffect里异步插入再补id
scroll-margin-top 失效？它只作用于 :target 元素自身
默认滚动会把 :target 元素顶到视口顶部，遮住导航栏。想停在导航栏下方，必须把 scroll-margin-top 写在目标元素上：
#tab1:target {
scroll-margin-top: 64px;
}写成 .tab-container :target { scroll-margin-top: 64px; } 多数浏览器不认——该属性只对被滚动到的那个具体 id 元素起效。Safari 旧版本支持不全，上线前务必实测。
最易被忽略的一点：:target 的行为依赖浏览器原生锚点机制，它和 JS 路由是两套系统；强行混合使用时，失效不是偶然，而是必然。先确认你的场景是否真的适合纯 CSS 方案，再决定要不要绕开它去写 JS 状态管理。
