CSS標籤着色問題

Question

/* 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; 

} 

這是當你將鼠標的代碼，它的作用是證明您已通過改變它的顏色

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

} 

Answer 1

你會懸停在選項都定義每個元素你自己。幸運的是，使用CSS3，你可以使用nth-child selector。

例如，你可以試試這個：

#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; 
} 

等。還有其他的方式可以做到這一點（比如對每個元素應用不同的類，或者使用Javascript），但通過它的聲音，這是最接近你需要的。