:target 不能实现真正可用的轮播图，因其仅响应 url 片段变化、无事件触发、不支持自动播放/循环/暂停，且易受 history 副作用和样式互斥失效影响；推荐改用 radio + :checked + @keyframes 方案。
:target 不能实现真正可用的轮播图，它只响应 URL 片段变化，属于被动显隐切换机制，不支持自动播放、循环、暂停或状态同步。
为什么 :target 轮播只能手动点击且容易出错
浏览器每次点击 a[href="#img2"] 都会向 history 栈推入新记录，连点两次“下一张”后按浏览器后退键，页面会跳回上一张——这不是轮播逻辑，是导航历史副作用。更关键的是：:target 本身不触发任何事件，无法知道“当前哪张已显示完毕”，也无法在切换前/后做清理（比如重置动画计时器、释放资源）。常见错误现象包括：多张图同时显示（:target 规则未互斥）、初始页无图（URL 不带 fragment 时所有 :target 规则都不匹配）、锚点 ID 拼写不一致导致样式失效。
:target + 绝对定位实现显隐切换的最小结构
核心不是堆动画，而是保证「同一时刻仅一张可见」。需满足三个硬性条件：
- 所有图片用
position: absolute叠在容器内，共用同一z-index层级 - 默认全部设为
opacity: 0或visibility: hidden，避免闪现 - 每张图的
:target规则必须独立、互斥，例如：#slide1:target ~ .slide { opacity: 0; } #slide1:target { opacity: 1; }，不能靠单一规则控制全部
替代方案比死磕 :target 更实际
如果真需要纯 CSS 轮播且带自动播放，应改用 input[type="radio"] + :checked + @keyframes 组合：
-
radio按钮天然互斥，无需手动清空其他状态 -
@keyframes可定义完整周期（如 12s 内切 4 张图，每张停留 3s），配合animation-iteration-count: infinite实现循环 - 用户 hover 容器时加
animation-play-state: paused即可暂停，无需 JS 监听 - 兼容性上，
radio + :checked在 IE9+ 均有效，而:target在 IE8- 完全不支持
真正难的从来不是“怎么让图动起来”，而是“怎么让动的过程不被 URL、history、焦点、缩放、屏幕阅读器干扰”。:target 的设计初衷是文档内锚点高亮，拿它做轮播，就像用螺丝刀拧螺母——能转，但打滑、费力、还容易崩牙。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
