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），但通过它的声音，这就是最接近你需要的东西。

CSS Tab着色问题

1 个答案: