如何为Swiper中首个和最后一个可见元素添加样式？

问题分析 #

你之前用:first-child和:last-child给带.swiper-slide-visible类的首尾元素设置遮罩，但这两个伪类是相对于父元素的所有子元素，而非仅带目标类的元素，导致样式错误覆盖了所有可见Slide。

正确选择器写法 #

• 首个可见Slide：直接选中父元素下第一个带.swiper-slide-visible的子元素，同时排除后续同类型元素：

  /* 首个可见Slide */
  .swiper-wrapper > div.swiper-slide-visible {
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  }
  /* 排除首个之后的可见Slide，避免样式叠加 */
  .swiper-wrapper > div.swiper-slide-visible ~ div.swiper-slide-visible {
    mask-image: none;
    -webkit-mask-image: none;
  }
  

• 最后一个可见Slide：用:not(:has(~ .swiper-slide-visible))选择器，匹配「后面没有同类型可见兄弟元素」的Slide，也就是最后一个可见项：

  /* 最后一个可见Slide */
  .swiper-wrapper > div.swiper-slide-visible:not(:has(~ .swiper-slide-visible)) {
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
    -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
  }
  

补充说明 #

• :has()伪类需现代浏览器支持，若要兼容旧版浏览器，可通过JavaScript动态给最后一个可见Slide添加额外类名（比如.swiper-slide-visible-last），再用类名设置样式。
• 建议调整遮罩渐变方向：首个Slide用to right，最后一个Slide用to left，更符合视觉逻辑。

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