如何為 flexbox 專案添加不同的邊框顏色。彈性專案將被動態添加，必須對專案應用 5 種不同的邊框顏色。flexbox 項需要以邊框顏色為紅色開始，然后是下一個 flexbox 項的邊框顏色為橙色、黃色、粉紅色、綠色，然后以紅色開始并再次重復相同的邊框顏色順序。
我嘗試了 nth-child 但它不再以紅色開始。
.slider {
display: flex;
gap: 20px;
flex-direction: row;
}
.slider > div {
height: 50px;
width: 50px;
background-color: blue;
}
.slider > div:nth-child(1n 0) {
border: 5px solid red;
}
.slider > div:nth-child(2n 0) {
border: 5px solid orange;
}
.slider > div:nth-child(3n 0) {
border: 5px solid yellow;
}
.slider > div:nth-child(4n 0) {
border: 5px solid pink;
}
.slider > div:nth-child(5n 0) {
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>uj5u.com熱心網友回復：
這里的問題在于你的nth-child公式。目前，您正在尋找 1 的倍數，然后是 2 的倍數，然后是 3 的倍數，依此類推。您想要的是 n 除以 5 時的余數。這是帶有更正公式的相關 CSS：
.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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/424595.html