同一HTML页面3个纯CSS轮播故障：第三个无法正常切换图片

我碰到过好几个类似的案例，你这情况大概率是radio按钮的name属性冲突导致的！

纯CSS轮播的核心逻辑是用同组同名的radio做切换触发器——因为同name的radio会互斥，同一时间只能选中一个。如果三个轮播的radio都用了同一个name（比如都叫slide），那点击第三个轮播的切换按钮时，其实是在和前两个轮播的radio抢选中状态，导致第三个轮播的状态永远无法正确触发，自然切不了图。

具体修复步骤： #

1. 给每个轮播的radio设置独立的name

   • 第一个轮播的radio name设为slide-group-1
   • 第二个设为slide-group-2
   • 第三个设为slide-group-3
     这样三组radio完全独立，不会再互相干扰。

2. 核对label的for属性与radio的id是否一一对应
   比如第三个轮播里，第一个radio的id是slide3-1，对应的label的for属性必须是slide3-1，别不小心写成前两个轮播的id了。

3. 确认CSS选择器层级完全独立
   既然你已经重命名了选择器，要确保第三个轮播的容器类（比如.slideshow-3）对应的CSS规则，是完全指向自身元素的，比如：

   .slideshow-3 input[name="slide-group-3"]:nth-of-type(1):checked ~ .slides-3 {
     transform: translateX(0);
   }
   .slideshow-3 input[name="slide-group-3"]:nth-of-type(2):checked ~ .slides-3 {
     transform: translateX(-100%);
   }
   

   别让选择器不小心匹配到前两个轮播的元素。

举个第三个轮播的简化代码示例：

<div class="slideshow-3">
  <!-- 独立name的radio组 -->
  <input type="radio" name="slide-group-3" id="slide3-1" checked>
  <input type="radio" name="slide-group-3" id="slide3-2">
  <input type="radio" name="slide-group-3" id="slide3-3">
  
  <!-- 对应id的切换按钮 -->
  <label for="slide3-1" class="slide-control-3"></label>
  <label for="slide3-2" class="slide-control-3"></label>
  <label for="slide3-3" class="slide-control-3"></label>
  
  <!-- 轮播图容器 -->
  <div class="slides-3">
    <div class="slide-3">...</div>
    <div class="slide-3">...</div>
    <div class="slide-3">...</div>
  </div>
</div>

按照这个思路调整后，第三个轮播的触发器就能独立工作，图片切换应该就正常了~

内容的提问来源于stack exchange，提问作者John Shot