:target 是 css 伪类，匹配 url fragment 指向的元素，适合图片预览因其无 js、无重绘、天然支持单页跳转；需满足 id 与 href 一致、非空链接、默认隐藏三条件，配合 opacity/transform 实现平滑过渡，注意移动端滚动偏移和 z-index 残留问题。
什么是 :target 以及它为什么适合做图片预览
:target 只在 URL 中包含匹配的 fragment（比如 #photo-2）且对应元素存在时生效。它不触发重绘、不依赖 JS，天然适合「点击缩略图 → URL 变化 → 显示大图」这种单页跳转式画廊。但要注意：它只能响应当前 URL 的 hash，不能主动控制或监听变化，所以必须靠 <a></a> 链接跳转来驱动。
HTML 结构必须满足的三个条件
缩略图和大图之间要形成可定位映射，否则 :target 找不到目标：
- 每个大图容器（如
<div class="gallery-item">）必须有唯一 <code>id，且该id要和缩略图链接的href值完全一致（例如href="#photo-3"对应id="photo-3"） - 缩略图链接本身不能是空链接（
href="#"），否则不会触发:target - 大图默认需隐藏（用
display: none或visibility: hidden），仅在被:target选中时显示
CSS 中如何用 :target 控制显示与过渡
直接写 .gallery-item:target { display: block; } 虽然能显示，但会突兀闪现。更实用的做法是结合 opacity 和 transform 实现淡入+缩放效果：
.gallery-item {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.9);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.gallery-item:target {
opacity: 1;
visibility: visible;
z-index: 1000;
}
.gallery-item:target img {
max-width: 90vw;
max-height: 80vh;
transform: scale(0.95);
transition: transform 0.3s ease;
}
.gallery-item:target img:hover {
transform: scale(1);
}
注意：不要对 :target 元素用 display: block + transition，因为 display 不支持过渡动画，会导致效果失效。
容易被忽略的兼容性与体验细节
:target 在所有现代浏览器中都支持，包括 IE9+，但有两个实际问题常被忽视：
- 移动端 Safari 在某些 iOS 版本中，首次点击链接后页面可能不滚动到目标位置——需给
.gallery-item加scroll-margin-top: 60px（避开固定 header） - 用户按浏览器后退键时，
:target会自动失效，但大图容器若用了position: fixed，残留的z-index可能遮挡下方内容；建议加一条:target:target { z-index: 1000; }确保只在激活时置顶 - 如果画廊支持键盘导航（如按 Esc 关闭），纯 CSS 无法实现——这时得补一行 JS 监听
keydown并修改 location.hash，:target会自动响应
hash 驱动的模式简单可靠，但它的边界也很清楚：不是 JS 替代品，也不处理加载失败、图片尺寸未知、SEO 等问题。真要兼顾这些，就得上真实路由或组件化方案了。
