:checked伪类仅响应用户显式点击，无法实现自动播放、无限循环等动态功能；它只能通过radio+label触发静态幻灯片的手动切换，需配合css控制显隐与过渡，但存在无障碍、兼容性及体验缺陷。
不能只靠 :checked 实现真正可用的轮播图——它只能驱动单次切换，缺乏自动播放、无限循环、滑动动画等核心能力；但可以配合 input[type="radio"] + label + 位移/透明度控制，做出无 JS 的静态幻灯片切换（即“点击切换”，非“自动轮播”）。
为什么 :checked 只能做手动切换，不能做自动轮播
:checked 是伪类，仅响应用户对 input[type="radio"] 或 input[type="checkbox"] 的显式点击（或通过 label[for] 关联触发），它无法被 CSS 自行触发、定时切换或监听时间。没有 JS，就无法模拟“每隔 3 秒切一张”这类行为。
常见误解是看到某些 demo 有“自动”效果，实际要么用了 @keyframes 硬编码固定帧数（比如 3 张图写死 3 段动画，无法增删），要么混入了 JS —— 纯 CSS 无法动态感知当前是第几张、也无法重置计时器。
用 input[type="radio"] + :checked 控制幻灯片显隐
核心思路：每张图对应一个 input[type="radio"]，所有 radio 共享 name；用 :checked 触发相邻兄弟元素（如 .slide）的 opacity 或 transform 变化。
- 必须给每个
input设置唯一id，并让label通过for关联，否则点击无效 -
input必须放在.slide元素之前（或用~选择器跨兄弟），否则:checked ~ .slide不生效 - 默认所有
.slide设为opacity: 0; position: absolute;，只有被选中的那张设为opacity: 1; z-index: 1; - 若想加淡入淡出，需统一给
.slide加transition: opacity 0.4s ease;（注意：不要只加在:checked上，否则反向切换无过渡）
<input type="radio" name="slider" id="s1" checked><label for="s1"></label>
<input type="radio" name="slider" id="s2"><label for="s2"></label>
<div class="slides">
<div class="slide">Slide 1</div>
<div class="slide">Slide 2</div>
</div>
.slides .slide { opacity: 0; transition: opacity 0.4s; }
#s1:checked ~ .slides .slide:nth-child(1),
#s2:checked ~ .slides .slide:nth-child(2) { opacity: 1; }
容易被忽略的兼容性与体验陷阱
纯 CSS 轮播在真实项目中常因以下问题被弃用：
-
:checked不支持键盘空格/回车触发（无障碍失败），input默认不可聚焦，需加tabindex="0"并处理:focus样式 - 移动端 Safari 对相邻选择器
~的渲染偶有延迟，导致切换瞬间闪白（可改用position: absolute+z-index分层，而非依赖 opacity 过渡） - 无法响应浏览器前进/后退按钮，URL 不变，SEO 和分享链接都丢失上下文
- 若图片尺寸不一致，
height会塌陷——必须给.slides设固定高，或用aspect-ratio+overflow: hidden
真要“纯 CSS”又兼顾可用性，建议只用于极简场景（比如三张产品图的手动介绍页）；只要需求里出现“自动”“循环”“指示器同步”“响应式缩放”，就得引入 JS —— :checked 在这里只是个开关，不是轮播引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
