如何在Slick Slider中选中首个及末尾的active类？尝试方案未生效求助

先给你几个不用nth-child的CSS方案 #

方案1：用first-of-type/last-of-type（适合滑块标签统一的情况）

如果你的滑块项都是同一个标签（比如全是<div>），直接这么写：

/* 选中第一个active滑块 */
.slick-slide.active:first-of-type {
  flex: 2; /* 替换成你需要的样式属性 */
}

/* 选中最后一个active滑块 */
.slick-slide.active:last-of-type {
  flex: 2;
}

方案2：用相邻兄弟选择器锁定首尾

如果active滑块是连续排列的，用这个逻辑：第一个active前面没有其他active，最后一个active后面没有其他active，代码如下：

/* 首个active：前面没有同类型的active元素 */
.slick-slide.active:not(.active + .active) {
  flex: 2;
}

/* 末尾active：后面没有同类型的active元素 */
.slick-slide.active:not(.active ~ .active) {
  flex: 2;
}

解决你说的flex属性不生效的问题 #

要是选择器能命中元素但样式没出来，试试这几招：

• 提高选择器优先级：比如加上父容器的类，写成.slick-track .slick-slide.active:first-of-type，比单独的.slick-slide.active权重更高，能覆盖Slick自带的样式。
• 临时用!important验证：在属性后面加!important（比如flex: 2 !important;），先确认是不是优先级的问题，调试完再考虑替换成更高权重的选择器。
• 检查布局上下文：flex属性生效的前提是元素处于flex布局中，要么它的父容器设置了display: flex，要么元素自身是flex项。可以看看Slick的.slick-track是不是display: flex，如果不是，可能需要调整父容器的布局。

实在不行就用JS辅助 #

如果CSS方案受限，直接用JS给首尾active元素加自定义类，再写样式：

// 获取所有active滑块
const activeSlides = document.querySelectorAll('.slick-slide.active');
if (activeSlides.length > 0) {
  activeSlides[0].classList.add('active-first');
  activeSlides[activeSlides.length - 1].classList.add('active-last');
}

// 一定要在滑块切换后重新执行，不然切换后样式会失效
$('.your-slider').on('afterChange', function() {
  // 先清除之前加的类
  document.querySelectorAll('.active-first, .active-last').forEach(el => {
    el.classList.remove('active-first', 'active-last');
  });
  // 重新给首尾active加类
  const newActiveSlides = document.querySelectorAll('.slick-slide.active');
  if (newActiveSlides.length > 0) {
    newActiveSlides[0].classList.add('active-first');
    newActiveSlides[newActiveSlides.length - 1].classList.add('active-last');
  }
});

然后用自定义类写样式：

.slick-slide.active-first,
.slick-slide.active-last {
  flex: 2;
}

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