【发布时间】：2021-09-05 19:51:04
【问题描述】：
您好，我正在编写时间线区域具有流畅的效果，我为此使用了 slick.js。我必须改变我的跨度的颜色。我更改了 slick-active 类元素中的第一个跨度，但我的更改不适用于其他跨度元素。我能做些什么呢？
这是我的代码 sn-p：
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, 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,
infinite: true,
}
},
{
breakpoint: 540,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 1024,
settings: {
slidesToShow: 5,
}
}
]
});
谢谢。
【问题讨论】：
标签： html css css-selectors pseudo-element slick.js