:target适合做tab切换因其天然响应url fragment变化，无需js、无重绘抖动；但仅响应hash变更，无法主动控制初始状态或清空hash，需显式设置初始hash或兜底。
为什么 :target 适合做 Tab 切换？
:target 匹配 URL 中 fragment（#xxx）指向的元素，天然具备“单页内状态切换”的能力。它不依赖 JS，无重绘抖动，且浏览器原生支持——只要 hash 变了，样式立刻响应。
但要注意：它只响应 window.location.hash 变化，不能主动触发“选中第一个 tab”或“关闭弹窗后清空 hash”。默认状态下（没有 hash）:target 不匹配任何元素，所以必须显式设置初始 hash 或用其他方式兜底。
Tab 切换怎么写才不翻车？
核心是让每个 tab panel 对应一个 id，并用 :target 控制显示/隐藏。常见错误是直接对 div 做 display: none + :target { display: block }，结果所有非 target 的面板被隐藏，但页面流布局塌陷，导致内容跳动或高度错乱。
- 推荐用
visibility: hidden+opacity: 0配合transition，保留占位，避免重排 - 每个 tab panel 必须有唯一
id，且对应链接的href="#id" - 不要把
:target直接写在nav或ul上——它只能匹配被 hash 指向的元素本身，不是祖先 - 若需默认展开第一个 tab，得手动加
location.hash = "#tab1"（JS），或服务端渲染时带 hash
示例结构：
<a href="#tab1">Tab 1</a> <a href="#tab2">Tab 2</a> <div id="tab1" class="panel">Content 1</div> <div id="tab2" class="panel">Content 2</div>
CSS：
.panel {
visibility: hidden;
opacity: 0;
transition: opacity 0.2s;
}
.panel:target {
visibility: visible;
opacity: 1;
}
弹窗用 :target 有哪些硬伤？
弹窗看似更简单——点链接，:target 匹配弹窗容器，显示它；点遮罩或关闭按钮，跳转到 # 或空 hash 即可关闭。但实际有几个关键坑：
-
history.pushState和前进/后退会干扰 hash，用户按返回键可能意外关闭弹窗，也可能卡在空白 hash 状态 - 移动端 Safari 对
:target的重绘有时延迟，尤其配合transform动画时 - 无法阻止默认行为（比如点击链接跳转），必须用
href="#modal"而不是href="javascript:;"，否则:target不触发 - 关闭按钮必须是
<a href="#">×</a>或<a href="#"></a>，不能是button—— button 不改变 hash，:target就不会退出
遮罩层建议和弹窗同级，用 :target 同时控制两者：
<a href="#modal">Open</a> <div id="modal" class="modal"> <div class="overlay"></div> <div class="content">...</div> </div>
CSS：
.modal, .overlay {
display: none;
}
.modal:target, .modal:target .overlay {
display: block;
}
兼容性和真实可用性底线在哪？
:target 在 IE9+、所有现代浏览器都支持，但 IE9 不支持 transition 与 :target 组合动画，且不支持对伪元素使用 :target。真正要命的是：它无法处理“多层弹窗”“嵌套 tab”“键盘焦点管理”“aria-label 同步”这些可访问性刚需。
如果你的项目需要支持屏幕阅读器、按 Esc 关闭、Tab 键聚焦限制，或者要兼容微信内置浏览器（部分版本对 hash 变化响应异常慢），:target 就只是个原型玩具。它适合内部工具、静态文档、A/B 测试页这类对交互深度要求低的场景。
别为了“纯 CSS”硬扛复杂逻辑——hash 是全局状态，多个组件共用时极易冲突；而真正的 Tab 切换往往要联动 URL、保持滚动位置、记录历史，这些都得靠 JS 拦截和接管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
