如何在 :before 中使用相邻选择器？

如何解决如何在 :before 中使用相邻选择器？

嗨，我正在编写时间轴区域具有光滑效果，为此我正在使用 slick.js。我必须改变我的跨度的颜色。我在 slick-active class 元素中更改了第一个 span，但我的更改不适用于其他 span 元素。我能为此做什么？

这是我的代码片段：

https://jsfiddle.net/arg0dev/w7uzvhmn/20/

请检查 /* ITS NOT WORKING */ 评论区。

HTML：

<section class="km-timeline" style="background: url('assets/materials/km-timelineBg.jpg');">
    <div class="container">
        <div class="row min-vh-60 d-flex align-content-center">
            <div class="swipeKM text-center" id="timeline" > 
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2010</span></div>
                      <div class="status">
                        <span>Sub 1</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2011</span></div>
                      <div class="status"><span>Sub 2</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2013</span></div>
                      <div class="status"><span>Sub 3</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2014</span></div>
                      <div class="status"><span>Sub 4.</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2015</span></div>
                      <div class="status"><span>Sub 5</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2017</span></div>
                      <div class="status"><span>Sub 6</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2017</span></div>
                      <div class="status"><span>Sub 7</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2019</span></div>
                      <div class="status"><span>Sub 8</span></div>
                    </div>
                    <div class="swiper-slide">
                      <div class="timestamp"><span class="date">2021</span></div>
                      <div class="status"><span>Sub 9</span></div>
                    </div>
                </div>
            
            <div class="col-md-12 text-center mt-3">
                <!-- If we need navigation buttons -->
                <button class="swiper-button-prev timelineNav me-3"><i class="fas fa-chevron-left"></i></button>
                <button class="swiper-button-next timelineNav"><i class="fas fa-chevron-right"></i></button>
            </div>
        </div>
    </div>
</section>

CSS：

body .km-timeline .min-vh-60 {
  height: 500px;
  background: #dddddd
}

body .km-timeline .timeline {
  list-style-type: none;
  display: -webkit-Box;
  display: -ms-flexBox;
  display: flex;
  padding: 0;
  text-align: center;
}

body .km-timeline .timestamp {
  margin: auto;
  margin-bottom: 20px;
  padding: 0px 4px;
  display: -webkit-Box;
  display: -ms-flexBox;
  display: flex;
  -webkit-Box-orient: vertical;
  -webkit-Box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-Box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 32px;
  font-weight: bold;
  color: #011b83;
}

body .km-timeline .status {
  padding: 0px 10px;
  display: -webkit-Box;
  display: -ms-flexBox;
  display: flex;
  -webkit-Box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: dashed 2px #ffffff;
  position: relative;
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

body .km-timeline .status span {
  padding-top: 35px;
  padding-bottom: 35px;
  font-size: 18px;
  color: #011b83;
}

body .km-timeline .status span:before {
  content: '';
  width: 28px;
  height: 28px;
  border-radius: 100%;
  border: 1px solid #b1b1b1;
  position: absolute;
  left: 50%;
  top: 0%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  -webkit-transition: all 200ms ease-in;
  transition: all 200ms ease-in;
}

body .km-timeline .active span {
  font-size: 19px;
  font-weight: bold;
}

body .km-timeline .active span::before {
  width: 42px;
  height: 42px;
  background-color: #011b83 !important;
  border: 1px solid #011b83 !important;
}

body .km-timeline .swiper-container {
  width: 95%;
  margin: auto;
  overflow-y: auto;
  scroll-behavior: smooth;
}

body .km-timeline .swiper-wrapper {
  display: -webkit-inline-Box;
  display: -ms-inline-flexBox;
  display: inline-flex;
  -webkit-Box-orient: horizontal;
  -webkit-Box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  overflow-y: auto;
  -webkit-Box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body .km-timeline .swiper-container::-webkit-scrollbar-track {
  background: #a8a8a8b6;
}

body .km-timeline .swiper-container::-webkit-scrollbar {
  height: 2px;
  display: none;
}

body .km-timeline .swiper-container::-webkit-scrollbar-thumb {
  background: #4F4F4F !important;
}

body .km-timeline .swiper-slide {
  text-align: center;
  font-size: 12px;
  width: 200px;
  height: 100%;
  position: relative;
}

body .km-timeline .swiper-button-disabled {
  color: rgba(255,255,0.5) !important;
}

body .km-timeline .timelineNav {
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  margin: 0;
  font-size: 32px;
  color: #ffffff;
}

/* ITS WORKING */
.slick-active span:before{
  background-color: red;
}

/* ITS NOT WORKING */

.slick-active span:before + .slick-active span:before{
  background-color: #fff;
}

/* ITS NOT WORKING */

JS：

$('.swipeKM').slick({
  dots: false,infinite: true,speed: 300,slidesToShow: 5,slidesToScroll: 1,responsive: [
    {
      breakpoint: 320,settings: {
        slidesToShow: 1,}
    },{
      breakpoint: 540,settings: {
        slidesToShow: 2,{
      breakpoint: 768,settings: {
        slidesToShow: 3,{
      breakpoint: 1024,settings: {
      slidesToShow: 5,}
    }
  ]

});

谢谢。

解决方法

是的！终于成功了！ :)

只是我在下面添加了此代码：

.slick-current span:before{
  background-color: red !important;
}

.slick-active span:before {
  background-color: #fff;
}

只是我错过了 .slick-current 元素 :)

非常感谢。