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

}
4

1 回答 1

0

你必须自己定义每个元素。幸运的是，使用 CSS3，您可以使用nth-child 选择器。

例如，你可以试试这个：

#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），但听起来这是最符合您需要的方法。

于 2013-07-24T00:49:24.140 回答