:target 切换 tab 内容不显示的主因是锚点 id 不匹配，必须确保 href=”#id” 与目标元素 id=”id” 严格一致；需避免 class/data 属性误用、重复 id；默认滚动可用 scroll-margin-top 调整；隐藏内容宜用 visibility: hidden 等视觉隐藏而非 display: none；老旧浏览器需 js 或服务端降级。
用 :target 切换 Tab 时内容不显示？检查锚点是否匹配
最常见的情况是点击 Tab 后 URL 变了，但对应内容没高亮或没出现——本质是 :target 没生效。它只作用于当前 URL 哈希（#xxx）所指向的、具有相同 id 的元素。如果 Tab 的 a 链接 href 是 #tab1，那目标元素必须有 id="tab1"，不能是 class="tab1" 或 data-id="tab1"。
容易踩的坑：
-
:target不支持 class、data 属性等其他选择器，只能靠id - 多个同名
id会导致行为不可预测（HTML 规范要求id唯一） - 如果页面加载时 URL 已带哈希（如
page.html#tab2），:target会立即生效，无需点击
为什么点击后页面跳到顶部？:target 的默认滚动行为
:target 触发时，浏览器会自动滚动到匹配元素的顶部位置，这是原生行为，不是 bug。如果你的 Tab 内容在视口下方，用户会看到“闪一下”再回到原位，体验割裂。
解决办法只有 css 层面抑制：
立即学习“前端免费学习笔记（深入）”；
- 给目标元素加
scroll-margin-top（比如scroll-margin-top: 60px），让滚动停在导航栏下方 - 或者全局关掉平滑滚动：在
html或body上设scroll-behavior: auto（但会影响所有锚点跳转） - 注意：
scroll-margin-top在 safari 旧版本中支持不全，需测试
如何让未激活的 Tab 内容「真隐藏」而不是仅视觉隐藏？
很多人用 :not(:target) 给其他 Tab 加 display: none，结果发现 seo 不友好、屏幕阅读器读不到、JS 获取 offsetHeight 为 0——因为 display: none 确实移除了元素的布局空间和可访问性。
更稳妥的做法是用视觉隐藏而非结构移除：
- 用
visibility: hidden+position: absolute+left: -9999px组合，保持 dom 存在且可读 - 或者只用
opacity: 0+pointer-events: none，适合需要过渡动画的场景 - 别对
:target元素本身设display: block（它默认就是 block），除非你重置过 display
IE 和老版 Safari 不支持 :target？得有降级方案
:target 在 IE8+ 支持，但 IE8 对伪类选择器有数量限制（最多 4095 字节 CSS），而 Safari 5.1–6.0 有渲染 bug：首次加载带哈希的页面时可能不触发样式。纯 CSS 方案在这些环境里不可靠。
如果必须兼容：
- 服务端渲染时根据 URL 哈希直接输出对应 Tab 的
class="active"，CSS 用.tab.active控制显隐 - 前端 JS 监听
hashchange事件，手动切换 class（只需几行，比写完整 Tab 组件轻量得多） - 别指望
:target做复杂状态管理——它没有「多选」「禁用态」「异步加载」能力，遇到这些就得切 JS
真正麻烦的不是写法，而是当 Tab 内容包含表单、视频、iframe 时，:target 切换不会触发重新加载或重置，得自己监听并清理状态。