:target 是 CSS 原生伪类，当 URL fragment（#xxx）与页面元素 id 匹配时激活该元素，无需 JS 即可实现锚点高亮、内容展开、弹窗显示等交互；其核心是通过结构配合（如遮罩层联动、opacity/transform 过渡）和唯一 ID 控制状态，但无法管理历史、焦点或多级嵌套。
什么是 :target 伪类，它能做什么
:target 是 CSS 原生支持的伪类，当 URL 的 fragment（即 #xxx 部分）与页面中某个元素的 id 匹配时，该元素就成为「目标元素」，:target 就会生效。它不依赖 JS，天然适合做「无脚本锚点交互」——比如点击链接跳转到某区块、展开说明、或显示弹窗。
用 :target 实现弹窗的基本结构
关键不是“弹出”，而是“让某个隐藏区域在匹配时可见”。常见错误是直接对 :target 元素设 display: block，但弹窗通常需要遮罩层、居中、可关闭等效果，必须靠结构配合：
- 弹窗容器（如
<div id="modal-login">）需有id，且初始状态为display: none或visibility: hidden - 遮罩层（
<div class="modal-overlay">）放在同一层级，用:target ~ .modal-overlay或相邻兄弟选择器联动 - 关闭按钮本质是跳转到一个空 fragment，例如
<a href="#">×，触发当前:target失效
示例结构：
<a href="#modal-contact">联系我</a>
<div id="modal-contact" class="modal">
<div class="modal-overlay"></div>
<div class="modal-content">
<a href="#" class="close">×</a>
<p>邮箱：hello@example.com</p>
</div>
</div>
对应 CSS 可写成：
立即学习“前端免费学习笔记（深入）”；
.modal { display: none; }
#modal-contact:target { display: block; }
#modal-contact:target .modal-overlay { opacity: 0.8; }
#modal-contact:target .modal-content { transform: scale(1); }
为什么弹窗常卡住关不掉？几个典型坑
最常见问题是关闭失效，本质是 fragment 没清空或选择器没覆盖到：
-
href="#"在某些浏览器里不会清除 fragment（尤其页面已有#），稳妥做法是href="#!"或href="javascript:void(0)"（但后者不算纯 CSS 方案）；更推荐用href=""+id不重复，或确保每个弹窗有唯一 ID 并关闭时跳转到不存在的 ID，如href="#nothing" -
:target只作用于当前 fragment 匹配的元素，无法跨级影响父容器。如果弹窗结构是<div id="wrap"><div class="modal">...</div></div>，那么#wrap:target .modal才生效，而不是.modal:target - 动画不触发：CSS transition 对
display无效，改用opacity+visibility或transform，并确保初始状态和:target状态都有过渡声明
移动端和可访问性要注意什么
:target 在所有现代浏览器（含 iOS Safari、Android Chrome）都支持，但有两个隐性限制：
- URL fragment 变化不会触发
popstate，所以浏览器「返回」按钮无法退回上一个弹窗状态（这是纯 CSS 方案的固有边界） - 屏幕阅读器可能不会自动聚焦
:target元素，建议在弹窗内加tabindex="-1"并用focus()—— 这时就得引入极少量 JS，纯 CSS 无法解决焦点管理 - iOS Safari 有个已知问题：
:target样式在快速连续打开/关闭时偶发不更新，可加will-change: opacity或强制重排（如修改body的min-height）缓解，但多数场景下不影响使用
真正难处理的是「多弹窗嵌套」和「历史记录同步」，这些已超出 :target 能力范围，得换方案。
