Html CSS选项卡着色问题

这里是编辑选项卡的代码。我的问题是，我需要每个标签都是不同的颜色，但我不知道要更改什么。我试着制作一个图像并上传它（一个彩虹类型的图像，有我需要的所有颜色），但是它没有覆盖它，而是在每个单独的标签中重复图像。有什么方法可以更改独立选项卡的颜色吗

/* Navigation
--------------------------------------------------------------------------------*/

#nav-wrap .container {
    clear: both;
    overflow: hidden;
    position: relative;
}

#nav-wrap .container table, #nav-wrap .container table tr, #nav-wrap .container table tr td, #nav-wrap .container table tbody {
    vertical-align:bottom;
}

td#nav {
    float:right;
    border-spacing:0;
}
#navigation {
    line-height: 1;
    float: right;
}

#navigation ul {
    list-style: none;
    float: left;
    width:946px;
    height:44px;
    margin-bottom:-1px;
}

#navigation li {
    display: inline;
    position: relative;
    list-style: none;
    float: left;
    /* THIS IS WHERE YOU CHANGE THE MARGIN OF THE TABS */
    margin:0 0 0 0px;
}

这是当您将鼠标悬停时的代码，它所做的只是通过更改选项的颜色来显示您已将鼠标悬停在该选项上

#navigation li.wsite-nav-0 {margin-left:0;}
/* THIS IS WHERE YOU EDIT ALL OF THE TABS AND WHAT-NOT */
#navigation ul li a {
    display: block;
    color: #333;
    text-decoration: none;
    padding:4px 0 4px 0;
    margin:0;
    width:130px;
    border: 0;
    outline: 0;
    list-style-type: none;
    box-sizing:border-box;
    float: left;
    font:11px Georgia, serif;
    border-top:8px solid #939598 ;
    /* background: url(menu.png)  ; */
}
/* THIS IS WHERE THE COLORS AND WHAT-NOT IS FOR THE ACTIVE/HOVERED TABS */
#navigation ul li#active a{
    border-top:8px solid #343434 ;  
    color: #000;

}

---

你必须自己定义每个元素。幸运的是，使用CSS3，您可以使用

例如，您可以尝试以下方法：

#navigation ul li a:hover {
    border-top:8px solid /*#404041 */;
    color: #666;

}

等等。还有其他方法可以做到这一点（比如对每个元素应用不同的类，或者使用Javascript），但从声音上看，这是最符合您需要的

#navigation ul li:nth-child(1) a {
    background-color: red;
}
#navigation ul li:nth-child(2) a {
    background-color: green;
}
#navigation ul li:nth-child(3) a {
    background-color: blue;
}