:target伪类仅响应url fragment变化以匹配id元素，全屏效果需配合fixed定位、inset:0等css实现；失效主因是href与id不严格一致、id未设在容器上或样式未写在目标元素选择器上。
:target 伪类本身不控制“全屏”，它只响应 URL fragment 变化并匹配对应 id 元素。真正实现点击图片后视觉上「全屏查看」，靠的是给该元素写固定定位 + 覆盖视口的样式，:target 只是开关。
为什么写了 href="#img1" 却没反应？
最常见原因是：href 指向的 id 并不存在，或没加在正确元素上。
-
href="#img1"必须对应一个<div id="img1"></div>（不能是<img id="img1">）——因为你要控制的是整个模态容器，不是图片自身 - id 值必须严格一致：大小写、下划线、连字符都不能错；禁止空格、中文、
%、/等非法 URL 字符 - 页面加载后 URL 已带
#img1，但目标元素还没渲染出来（比如异步插入），:target不会回溯匹配
:target 样式该写在哪个选择器上？
必须写在被跳转的容器本身，比如 #preview-modal:target，而不是它的子元素或父元素。
- 错误写法：
img:target、.modal:target（没id就不匹配）、#preview-modal:target img（过渡和显隐控制失效） - 推荐结构：用
<div id="p1"><img src="..."></div>，样式直接作用于#p1:target - 关键样式要包含：
position: fixed、inset: 0、z-index: 9999、display: flex居中、background: rgba(0,0,0,.9)
如何让 Esc 或点击背景关闭？
:target 没有“关闭”逻辑，关闭 = 清除 URL fragment，浏览器自动取消匹配。
- Esc 键监听必须用
history.pushState替换当前 URL，例如：history.pushState(null, '', location.pathname + location.search) - 点背景关闭时，确保只响应 overlay 区域（
e.target === modalEl），否则点到图内会误关 - 避免用
window.location.hash = ''：iOS Safari 16.4+ 会触发两次popstate，导致闪退或白屏 -
href="#"关闭按钮可行，但注意它会让页面滚动到顶部；href=""在部分老浏览器里行为不一
移动端触控和缩放冲突怎么破？
iOS Safari 对 :target + fixed + 缩放的组合特别敏感，双指缩放可能让点击失效或导致 :target 突然失配。
- 务必在
<meta name="viewport">中设user-scalable=no，禁用缩放（全屏预览场景下缩放意义不大） - 给模态容器加
touch-action: manipulation，减少 iOS 的 300ms 延迟和误识别 - 不要依赖
width: 100vw和height: 100vh：Safari 地址栏收起/展开时vh会跳变，改用inset: 0更稳 - 图片用
<img>标签时，加draggable="false"防止长按呼出菜单干扰
:target，而是让 fragment 变化、样式生效、触控响应、iOS 兼容这四件事在所有设备上同步咬合——任意一环松动，用户就卡在半黑半亮的预览里出不来。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
