:target实现纯CSS选项卡需满足三硬条件：href必须为#id格式且不刷新页面；目标元素须已渲染并存在DOM中；id值与hash严格全等匹配（大小写、空格、字符均一致）。
:target 能实现纯 CSS 选项卡切换，但只在「浏览器真实跳转到 #id」时生效——不是所有点击都触发它，也不是所有结构都能让它稳定工作。
为什么点击链接后内容不显示？:target 匹配失败的三个硬条件
:target 不是监听器，它只响应地址栏 fragment 变更，并且要求 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 隐藏非激活面板会带来什么问题？
直接写 .panel { display: none; } + .panel:target { display: block; } 看似简单，但有明显副作用：
- 屏幕阅读器跳过未激活面板，可访问性受损
- 搜索引擎无法索引隐藏内容，影响 SEO
- 布局塌陷导致页面重排（reflow），内容区域突然跳动
- JS 获取
offsetHeight为 0，后续逻辑可能出错
更稳妥的视觉隐藏方式是：
立即学习“前端免费学习笔记（深入）”；
.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>中 - 前端初始化时执行
window.location.hash || (window.location.hash = "#tab1") - 避免用
:not(:target)控制所有非目标面板 —— 动态渲染下容易漏匹配、错位
真正难的不是写对那几行 CSS，而是确保「hash 变 → DOM 存 → id 对 → 样式命」这条链路每一环都在线；任意一环断开，:target 就彻底静音。
