如何为每个光滑的滑块项目应用不同的边框颜色

Question

我需要为每个光滑滑块项目应用不同的边框颜色，有5种颜色以红色开头，我尝试了下面的代码，但它不起作用，当我将光滑滑块应用到它时，它只将第一种颜色应用到所有项目。

<div class="slider">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div> 
<div></div> 
<div></div> 
</div>
.slider {
display: flex;
gap: 20px;
flex-direction: row;
}
.slider > div {
height: 50px;
width: 50px;
background-color: blue;
}
.slider > div:nth-child(5n+1) {
border: 5px solid red;
}
.slider > div:nth-child(5n+2) {
border: 5px solid orange;
}
.slider > div:nth-child(5n+3) {
border: 5px solid yellow;
}
.slider > div:nth-child(5n+4) {
border: 5px solid pink;
}
.slider > div:nth-child(5n+5) {
border: 5px solid green;
}

Answer 1

使用css变量

<div class="slider">
<div style='--clr:#000'></div>
<div style='--clr:#fff'></div> 
------
</div>
.slick-item{
border:5px solid var(--clr);
}

Answer 2

您只需要更改第n个子设置：

.slider {
display: flex;
gap: 20px;
flex-direction: row;
}
.slider>div {
height: 50px;
width: 50px;
background-color: blue;
}
.slider>div:nth-child(5n+1) {
border: 5px solid red;
}
.slider>div:nth-child(5n+2) {
border: 5px solid orange;
}
.slider>div:nth-child(5n+3) {
border: 5px solid yellow;
}
.slider>div:nth-child(5n+4) {
border: 5px solid pink;
}
.slider>div:nth-child(5n+5) {
border: 5px solid green;
}

<div class="slider">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>