:target 伪类仅匹配 url fragment 与元素 id 完全一致的目标，需确保容器有唯一 id 且与 href 值严格一致；全屏样式须写在该容器选择器上，关闭依赖修改 url fragment，移动端需禁用缩放并优化触控交互。
点击图片触发 :target 为什么没反应
因为 :target 只匹配 URL 中 fragment（#后面的部分）与元素 id 完全一致的元素，不是靠 class 或 data 属性。常见错误是写了 href="#img1" 却没给对应 <img> 设置 id="img1"，或者用了 class="img1" 试图匹配——这完全无效。
实操建议：
- 确保每个预览图容器（比如
<div>）有唯一 <code>id，且和链接的href值严格一致 - 不要把
id加在<img>标签上——它通常需要包裹一层容器来控制全屏样式 - fragment 必须是 URL 编码安全的，避免空格、中文、特殊符号；推荐只用字母、数字、下划线
- 给模态容器设
position: fixed、z-index、inset: 0，再用display: flex居中内容 - 加
opacity: 0和visibility: hidden初始状态，:target里改为opacity: 1+visibility: visible，避免闪现 - 过渡动画只能用
opacity、transform等可动画属性；display不能过渡，别写display: block → display: none - 在模态容器内加一个关闭按钮，
href="#"或href=""（注意：后者可能触发页面顶部滚动） - 监听
Esc键：用document.addEventListener('keydown', e => { if (e.key === 'Escape') history.pushState(null, '', location.pathname + location.search); }) - 点击背景关闭需额外 JS：给 overlay 绑
click，判断e.target === modalEl再跳转到无 fragment 的 URL - 别依赖
window.location.hash = ''，它在某些 iOS 版本会触发两次 popstate - 全屏时强制禁用缩放：
<meta name="viewport" content="user-scalable=no">，用 CSStransform: scale()手动实现缩放逻辑（需配合touchmove） - 关闭按钮最小尺寸设为
44px × 44px，符合 iOS 触控热区规范 - 给模态容器加
touch-action: manipulation，减少点击延迟 - 别用
pointer-events: none在 overlay 上——它会拦掉所有 touch 事件，包括关闭操作
:target 全屏样式写在哪才生效
CSS 的 :target 伪类作用于被跳转到的元素本身，所以全屏逻辑必须写在该元素的选择器里，而不是它的子元素。很多人误写成 img:target { ... }，但实际要控制的是外层容器，比如 #preview-modal:target { ... }。
实操建议：
如何让 Esc 键或点击背景关闭预览
:target 本身不提供关闭能力，它只响应 URL fragment 变化。所以关闭本质是「把 URL 的 #xxx 去掉」，浏览器会自动取消 :target 匹配。
实操建议：
移动端双击缩放和 touch 交互冲突怎么解
全屏后若允许用户缩放图片，viewport 的 user-scalable=yes 会让双指缩放生效，但也可能干扰点击穿透或导致 :target 失效（尤其 Safari）。更麻烦的是，iOS 上点击区域小、touchstart 响应延迟，容易点不中关闭按钮。
实操建议：
真正难的不是写出全屏效果，而是处理 fragment 变更带来的历史栈污染、iOS 的 popstate 不稳定、以及 touch 和 click 在同一区域的竞态。这些细节不调到真机上反复试，很容易上线后才发现点不动。
