[英]How to color each li in css in different colors
every body I have this css color every li it's work You can see example in this article https://devlopertechnology.blogspot.com/2019/11/software-engineering-software-project.html每个人我都有这个 css 颜色每个 li 它的工作你可以在这篇文章中看到例子https://devlopertechnology.blogspot.com/2019/11/software-engineering-software-project.ZAFC369FDC70D5FC768E
This the code my question is in the end这是我的问题最后的代码
.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 ;
}
But I want to convert it to dynamic, using loop or function If there is idea, thank you for your help.但我想将其转换为动态,使用循环或 function 如果有想法,谢谢你的帮助。
You can try this:你可以试试这个:
// 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];
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.