如何在不同的 colors 中為 css 中的每個 li 着色

Question

每個人我都有這個 css 顏色每個 li 它的工作你可以在這篇文章中看到例子https://devlopertechnology.blogspot.com/2019/11/software-engineering-software-project.ZAFC369FDC70D5FC768E

這是我的問題最后的代碼

.post ul li:nth-of-type(12){
  background-color: #9FA4C4;
}
.post ul li:nth-of-type(13) {
  background:   #B3CDD1 ;
}
.post ul li:nth-of-type(14) {
  background:   #9E768F ;
}
.post ul li:nth-of-type(15) {
  background:   #9FA4C4 ;
}
.post ul li:nth-of-type(16) {
  background:   #B279A7 ;
}
.post ul li:nth-of-type(17) {
  background:   #D387AB ;
}
.post ul li:nth-of-type(18) {
  background:   #864BA2 ;
}
.post ul li:nth-of-type(21) {
  background:   #BF3A30 ;
}
.post ul li:nth-of-type(10) {
  background:   #6E45E1 ;
}
.post ul li:nth-of-type(11) {
  background:   #89D4CF ;
}
.post ul li:nth-of-type(2) {
  background:   #A7ACD9 ;
}
.post ul li:nth-of-type(3) {
  background:   #9E8FB2;
}
.post ul li:nth-of-type(4) {
  background:   #A88BEB ;
}
.post ul li:nth-of-type(5) {
  background:   #F8CEEC ;
}

.post ul li:nth-of-type(6) {
  background:   #B58ECC ;
}
.post ul li:nth-of-type(7) {
  background:   #5DE6DE ;
}
.post ul li:nth-of-type(8) {
  background:   #647DEE ;
}
.post ul li:nth-of-type(9) {
  background:   #7F53AC ;
}
.post ul li:nth-of-type(19) {
  background:   #77EED8 ;
}
.post ul li:nth-of-type(20) {
  background:   #9EABE4 ;
}

但我想將其轉換為動態，使用循環或 function 如果有想法，謝謝你的幫助。

Answer 1

你可以試試這個：

    // Fetch the list of elements matching the selector
    const listElements = document.querySelectorAll('.post ul li');
    // Store the colors in an array
    const colors = [here you can store the colors you want]; // Assuming this has the same number of values as the list in your html, otherwise the below loop will fail if the values are less.
    // Map each color with the corresponding list element
    for(let index in listElements) {
        listElements[index].style.backgroundColor = colors[index];
    }