:target伪类无法真正关闭模态框，因其仅响应URL片段变化且无自动取消机制；纯CSS方案只能实现单向、不可关闭的快照式显示，需配合锚点与display控制，适用场景极为有限。
:target 伪类本身不能独立实现完整模态框交互，它只响应 URL 片段变化，必须配合 HTML 锚点和基础 CSS 显隐控制才能工作——没有 JavaScript 时，它只能做单向、不可关闭的“快照式”模态框。
为什么 :target 无法真正关闭模态框
:target 匹配的是当前 URL 中 #id 对应的元素（如 <div id="modal">），一旦用户点击链接跳转到该锚点，:target 就生效；但浏览器不会自动“取消”这个状态——除非手动修改 URL（比如再点一个其他锚点或用浏览器后退），否则模态框会一直显示。
- 点击关闭按钮（如
<a href="#">×）只会触发#，不移除原#modal，所以:target仍匹配 -
history.pushState()或location.hash = ""属于 JS 行为，绕开了 :target 的设计初衷 - 想纯 CSS 关闭？目前没有任何标准伪类能响应“非 target”状态
纯 CSS 模态框的最小可行结构
要让 :target 奏效，HTML 必须有可跳转的锚点目标，且模态框需默认隐藏、仅在匹配时显示：
<a href="#login">登录</a>
<div id="login" class="modal">
<div class="modal-content">
<a href="#" class="close">×</a>
<h2>登录表单</h2>
</div>
</div>
CSS 需确保：
立即学习“前端免费学习笔记（深入）”；
-
.modal默认display: none或visibility: hidden -
.modal:target改为display: block（注意：用visibility会导致占位，推荐display） - 关闭链接
.close必须指向一个**不存在的 ID**（如href="#_"）或页面内另一个空锚点，否则可能意外触发其他 :target
:target 模态框的兼容性与性能陷阱
看似轻量，但实际有硬伤：
- SEO 和可访问性差：模态框内容始终在 DOM 中，屏幕阅读器可能提前读出，且无焦点管理
- URL 污染：每次打开都改变地址栏，用户刷新页面会重进模态框，无法真正“退出”
- 移动端 Safari 对
:target的重绘有时延迟，尤其配合transform动画时容易卡顿 - 不能阻止背景滚动——需额外加
body:target { overflow: hidden; }，但这样会让整个页面失焦
什么时候可以勉强用 :target 做模态框
仅适用于极简场景，比如文档内轻量提示、静态演示页、或作为 JS 模态框的降级 fallback：
- 内容极少（不超过 10 行文本 + 1 按钮）
- 不要求键盘导航（Tab 切换）、ESC 关闭、焦点捕获
- 接受 URL 地址栏变化，且不介意用户通过后退键“关闭”
- 项目明确禁止 JS，或用于教学演示 :target 的基本行为
真要上线用，哪怕只加三行 JS（监听 hashchange + 移除 class + 焦点控制），体验也远超纯 CSS 方案。:target 是个有趣但受限的工具，别把它当成 Modal 的解决方案——它只是 URL 片段的视觉映射器。
