CSS :target伪类轮播动画失效问题排查求助

嘿，我一眼就发现问题所在啦——你的CSS选择器和DOM结构不匹配，导致:target触发的样式根本没作用到.slider__inner上！

核心问题分析 #

你写的#slide--1:target~.slider__inner这类选择器，有两个关键要求：

• #slide--1 和 .slider__inner 必须是同一层级的兄弟元素
• #slide--1 要出现在 .slider__inner 的前面

但你的当前DOM结构里，#slide--1 是 .slider__inner 的子元素，完全不符合兄弟选择器~的匹配规则，所以这些样式规则根本不会被应用，滑动自然没效果。

修复方案：调整DOM结构适配选择器 #

我们需要把触发:target的元素移到和.slider__inner同级的位置，用隐藏的空元素来承担锚点目标，同时保留原有的slide内容结构。

修改后的HTML代码 #

<div class="slider__wrapper">
 <div class="slider">
 <!-- 新增隐藏的target锚点，和inner同级 -->
 <div id="slide--1" class="slider__target"></div>
 <div id="slide--2" class="slider__target"></div>
 <div id="slide--3" class="slider__target"></div>

 <div class="slider__inner">
 <div class="slider__slides"> slide 1 </div>
 <div class="slider__slides"> slide 2 </div>
 <div class="slider__slides"> slide 3 </div>
 </div>
 </div>
 <div class="slider__toggle">
 <a href="#slide--1">01</a>
 <a href="#slide--2">02</a>
 <a href="#slide--3">03</a>
 </div>
</div>

修改后的CSS代码 #

.slider__wrapper { width: 300px; margin: 50px auto 0 auto; }
.slider { position: relative; overflow: hidden; }
.slider__inner { 
  position: relative; 
  width: 300%; 
  left: 0; 
  transition: all .6s; /* 只需要在这里写一次transition */
}
.slider__slides { float: left; width: 33.333%; font-size: 25px; }
.slider__toggle { display: inline-block; margin-right: 10px; margin-top: 20px; font-size: 16px; }

/* 隐藏锚点target元素，不影响页面布局 */
.slider__target { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  opacity: 0; 
  pointer-events: none; 
}

/* 给每个slide设置背景色 */
.slider__slides:nth-child(1) { background: red; }
.slider__slides:nth-child(2) { background: yellow; }
.slider__slides:nth-child(3) { background: green; }

/* 现在选择器能正确匹配，触发滑动啦！ */
#slide--1:target~.slider__inner { left: 0; }
#slide--2:target~.slider__inner { left: -100%; }
#slide--3:target~.slider__inner { left: -200%; }

额外优化说明 #

1. 把transition属性只写在.slider__inner的初始样式里就行，不用在每个:target规则重复声明，减少冗余。
2. 用nth-child给slide设置背景色，替代原来的id选择器，结构更简洁。

这样调整后，点击锚点链接时，对应的隐藏target元素会触发:target状态，通过兄弟选择器~就能正确控制.slider__inner的left值，滑动入场效果就正常工作啦！

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