:target伪类不能直接放大图片，需配合fixed定位与flex居中实现全屏预览；常见失效原因包括目标元素id缺失或不匹配、异步插入时机不当、fragment含非法字符及样式作用对象错误。
:target 伪类本身不能直接放大图片，它只负责匹配 URL fragment 并触发样式切换；真正实现“点击放大预览”，必须用 position: fixed + inset: 0 + 容器级 display: flex 居中控制视觉全屏，img 自身只负责源图渲染。
为什么 href="#p1" 点击后没反应
最常见原因是目标元素缺失或 id 不匹配。浏览器只会匹配当前 URL fragment（如 #p1）与页面中某个元素的 id 属性值——完全一致、大小写敏感、不可含空格或中文。
-
href="#p1"必须对应一个<div id="p1"><img src="..."></div>，不能把id="p1"加在<img>上（img:target无法撑开全屏布局） - 异步插入的容器（如 JS 动态生成）若在 URL 已带
#p1后才挂载，:target不会回溯生效 - fragment 中用了非法字符（如
#my img、#详情-1），需改用p1、detail_1等 URL-safe 命名
全屏样式必须写在目标容器选择器上
:target 是作用于被跳转元素本身的伪类，不是子元素或父元素。写错位置会导致样式不触发、过渡失效、甚至内容闪现。
- ✅ 正确：
#p1:target { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.9); } - ❌ 错误：
img:target（img没法设fixed覆盖全屏）、.modal:target（没id就不匹配）、#p1:target img（opacity过渡在此处写无效） - 初始状态建议设
visibility: hidden; opacity: 0;，:target中改为visibility: visible; opacity: 1;，避免 DOM 渲染完成前的闪现
如何关闭预览：本质是清空 URL fragment
:target 没有“关闭”能力，关闭 = 浏览器自动取消匹配，前提是 URL fragment 变为空。直接操作 window.location.hash 在 iOS Safari 16.4+ 会触发两次 popstate，导致白屏或跳转异常。
- 关闭按钮推荐用
<a href="#">×</a>，但注意它会滚动到页面顶部；更稳妥的是<a href="javascript:void(0)" onclick="history.pushState(null,'',location.pathname+location.search)"></a> - Esc 键监听必须用
history.pushState()替换当前 URL，例如：document.addEventListener('keydown', e => e.key === 'Escape' && history.pushState(null, '', location.pathname + location.search)) - 点击背景关闭需加 JS 判断：
e.target === modalEl，否则点到图片内部也会触发关闭 - 移动端务必在
<meta name="viewport">中设user-scalable=no，否则双指缩放可能破坏fixed定位，Safari 尤其敏感
真正难的不是写对 :target，而是处理 Safari 的 vh 跳变、iOS 的 touch 延迟、以及 fragment 清除时的兼容性边界。别信“纯 CSS 就万事大吉”，关键交互点该加的 JS 一行都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
