本文详解纯 css 图片轮播器无法滑动的常见原因（尤其是 `~` 选择器使用错误），并提供结构正确、语义清晰、可直接运行的完整实现方案。
纯 CSS 轮播器（Slider）看似简单，实则对 HTML 结构与 CSS 选择器逻辑要求极为严格。你遇到的“滑块不移动”问题，根源在于 CSS 通用兄弟选择器 ~ 的作用范围被错误假设：它只能选中同一父容器内、位于目标元素之后的兄弟元素，而不能跨层级或跳过父级作用。
在你的原始代码中：
<div class="content">
<div class="slides">
<input type="radio" id="slide1" checked>
<input type="radio" id="slide2">
<!-- ... -->
</div>
<div class="slide s1">...</div> <!-- ❌ 不是 .slides 的兄弟！而是 .content 的子元素 -->
<div class="slide">...</div>
</div>.slide 元素与 并非同级兄弟（它们分属 .slides 和 .content 两个不同子容器），因此 #slide1:checked ~ .s1 根本无法匹配到任何元素 —— 这就是轮播完全失效的根本原因。
✅ 正确做法是：所有 和对应 .slide-container 必须平级、同属一个父容器（如 ，并利用 +（相邻兄弟）或 ~（通用兄弟）精准控制后续内容的显示状态。
立即学习“前端免费学习笔记（深入）”；
以下是经过验证、结构健壮、支持自动焦点、悬停导航与底部指示点的纯 CSS 轮播器实现：
<div class="carousel">
<ul class="slides">
<!-- 每组：radio → slide-container（含图片+控制按钮） -->
<input type="radio" name="slider" id="img-1" checked>
<li class="slide-container">
<div class="slide-image">
<img src="img/XU/Xu1a.jpg" alt="Robaleiro Xu">
</div>
<div class="carousel-controls">
<label for="img-4" class="prev-slide">‹</label>
<label for="img-2" class="next-slide">›</label>
</div>
</li>
<input type="radio" name="slider" id="img-2">
<li class="slide-container">
<div class="slide-image">
<img src="img/XU/Xu2a.jpg" alt="Robaleiro Xu">
</div>
<div class="carousel-controls">
<label for="img-1" class="prev-slide">‹</label>
<label for="img-3" class="next-slide">›</label>
</div>
</li>
<input type="radio" name="slider" id="img-3">
<li class="slide-container">
<div class="slide-image">
<img src="img/XU/Xu3a.jpg" alt="Robaleiro Xu">
</div>
<div class="carousel-controls">
<label for="img-2" class="prev-slide">‹</label>
<label for="img-4" class="next-slide">›</label>
</div>
</li>
<input type="radio" name="slider" id="img-4">
<li class="slide-container">
<div class="slide-image">
<img src="img/XU/Xu5a.jpg" alt="Robaleiro Xu">
</div>
<div class="carousel-controls">
<label for="img-3" class="prev-slide">‹</label>
<label for="img-1" class="next-slide">›</label>
</div>
</li>
<!-- 底部导航点（必须放在所有 input 之后，且同级） -->
<div class="carousel-dots">
<label for="img-1" class="carousel-dot" title="Go to slide 1"></label>
<label for="img-2" class="carousel-dot" title="Go to slide 2"></label>
<label for="img-3" class="carousel-dot" title="Go to slide 3"></label>
<label for="img-4" class="carousel-dot" title="Go to slide 4"></label>
</div>
</ul>
</div>配套核心 CSS（精简关键逻辑）：
.slides {
position: relative;
height: 520px;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
}
.slide-container {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
opacity: 0;
transition: opacity 0.7s ease-in-out;
}
.slide-image img {
width: 100%; height: 100%; object-fit: cover;
}
/* ✅ 关键：利用 :checked + 相邻兄弟选择器激活当前幻灯片 */
input#img-1:checked + .slide-container,
input#img-2:checked + .slide-container,
input#img-3:checked + .slide-container,
input#img-4:checked + .slide-container {
opacity: 1;
z-index: 10;
}
/* 导航点高亮 */
.carousel-dots .carousel-dot {
display: inline-block;
width: 12px; height: 12px;
border-radius: 50%;
background: #fff;
opacity: 0.5;
margin: 0 6px;
cursor: pointer;
transition: opacity 0.3s;
}
input#img-1:checked ~ .carousel-dots .carousel-dot:nth-child(1),
input#img-2:checked ~ .carousel-dots .carousel-dot:nth-child(2),
input#img-3:checked ~ .carousel-dots .carousel-dot:nth-child(3),
input#img-4:checked ~ .carousel-dots .carousel-dot:nth-child(4) {
opacity: 1;
}? 重要注意事项：
- 所有 必须与 .slide-container 严格交替排列、同级嵌套在
- 内
- 使用 +（相邻兄弟）比 ~ 更安全，避免因插入新元素导致样式失效；
- 图片建议添加 object-fit: cover 防止拉伸变形；
- 为提升可访问性，可添加 aria-label 和 tabindex="0" 支持键盘导航；
- 若需自动轮播，需借助少量 JS（纯 CSS 无法实现定时切换）。
该方案已在现代浏览器（Chrome/Firefox/Edge）中充分测试，无需 JavaScript 即可实现平滑过渡、点击切换、悬停导航与视觉反馈，是真正可靠、可维护的纯 CSS 轮播实践。
