:target实现纯css选项卡需满足三硬条件：href必须为#id格式且不刷新页面；目标元素须已渲染并存在dom中；id值与hash严格全等匹配（大小写、空格、字符均一致）。

:target 能实现纯 CSS 选项卡切换，但只在「浏览器真实跳转到 #id」时生效——不是所有点击都触发它，也不是所有结构都能让它稳定工作。

为什么点击链接后内容不显示？:target 匹配失败的三个硬条件

:target 不是监听器，它只响应地址栏 fragment 变更，并且要求 DOM 中存在**完全匹配的 id**。常见断点：

• href="#tab2" 指向了 <div class="tab2"> —— <code>:target 只认 id，不认 class 或 data-id
• URL 是 #Tab2，但元素写的是 id="tab2" —— 大小写必须严格一致
• Tab 面板由 React/Vue 异步挂载，页面初始无 id="tab2" 元素 —— :target 匹配发生在 DOM ready 后，没元素就永远不触发

用 display: none 隐藏非激活面板会带来什么问题？

直接写 .panel { display: none; } + .panel:target { display: block; } 看似简单，但有明显副作用：

• 屏幕阅读器跳过未激活面板，可访问性受损
• 搜索引擎无法索引隐藏内容，影响 SEO
• 布局塌陷导致页面重排（reflow），内容区域突然跳动
• JS 获取 offsetHeight 为 0，后续逻辑可能出错

更稳妥的视觉隐藏方式是：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载

.panel {
  visibility: hidden;
  position: absolute;
  left: -9999px;
  opacity: 0;
  transition: opacity 0.2s;
}
.panel:target {
  visibility: visible;
  position: static;
  left: auto;
  opacity: 1;
}

SPA（React/Vue）中如何让 :target 真正生效？

JS 路由（如 router.push("/page#tab2")）默认不触发 :target，因为 pushState 不改变 location.hash 的读取行为。必须让浏览器“真跳”：

• 改用 window.location.hash = "#tab2" —— 最轻量，兼容性好，会自动滚动并触发 :target
• 若必须用 pushState，得补一句 location.replace("#" + id)（注意：这会再加一条历史记录）
• 确保组件挂载时已渲染带正确 id 的面板，不要在 useEffect 里异步插入再补 id

scroll-margin-top 也只对被滚动到的那个具体 id 元素起效，写成 .tab-container :target 多数浏览器不认。

默认展开第一个 tab 怎么做？

没有 hash 时，:target 不匹配任何元素，所以必须显式设置初始状态：

• 服务端渲染时直接输出 location.hash = "#tab1" 到 HTML 的 <script></script> 中
• 前端初始化时执行 window.location.hash || (window.location.hash = "#tab1")
• 避免用 :not(:target) 控制所有非目标面板 —— 动态渲染下容易漏匹配、错位

真正难的不是写对那几行 CSS，而是确保「hash 变 → DOM 存 → id 对 → 样式命」这条链路每一环都在线；任意一环断开，:target 就彻底静音。