Jquery 标签颜色不同

我想给每个标签一个不同的颜色，但我怎么做呢？ 我尝试过给每个链接或ul一个类，但没有成功。 我知道anwser很简单，但我不知道应该是什么 这是我使用的代码

这是我的css

<style>
.tabs li {
    list-style:none;
    display:inline;
}

.tabs a {
    display:inline-block;
    background:#999;
    color:#fff;
    text-decoration:none;
    width:172px;
    height:30px;
}

.tabs a.active {
    background:#fff;
    color:#000;
}
.inhoud {
    padding:18px;
    width:600px;
    padding-top:20px;
    width:965px;
    height:870px;
}
.tabstitel{
    padding:10px;
    width:120px;
    background:#099;
}
</style>

将此添加到CSS中：

#tab1{background-color:red}
#tab2{background-color:green}
#tab3{background-color:blue}
#tab4{background-color:yellow}
#tab5{background-color:purple}

或者类似的东西。

这是精简的：

HTML

<ul class='tabs'>
    <li class="tab1"><a href="?">titel</a></li>
    <li class="tab2"><a href="?">titel</a></li>
    <li class="tab3"><a href="?">titel</a></li>
    <li class="tab4"><a href="?">titel</a></li>
    <li class="tab5"><a href="?">titel</a></li>
</ul>

我还没有完全理解这一点，但给出一个a类，然后在CSS中调用它，比如

a.myclass{}

，我想，对于浏览器来说，它太具体、太沉重了，而且通常是一个no no no。据我所知，你想调用它们

。列表项class a{}

-更具体地说-如果您想为列表中可能的第二层ul提供未来证明，您可以使用>如<代码>列表类>列表项类>a{}

---

这是一个巨大的资源。请参见列表中的#8。

在javaScript的顶部，您可以只编写.tabs而不是ul.tabs。你想说“style.tabs”而不是“style any ul with the class of tabs.”在CSS中，你只需将.active而不是.tabs a.active放在。你想说，“style.active”而不是“style”在一个类为.tabs的元素中的任何带有类为active的链接”-@user2080695你找到了吗？您是否正在尝试将类添加到活动链接？每个人上不同的课？我被你的剧本弄糊涂了。

#tab1{background-color:red}
#tab2{background-color:green}
#tab3{background-color:blue}
#tab4{background-color:yellow}
#tab5{background-color:purple}

<ul class='tabs'>
    <li class="tab1"><a href="?">titel</a></li>
    <li class="tab2"><a href="?">titel</a></li>
    <li class="tab3"><a href="?">titel</a></li>
    <li class="tab4"><a href="?">titel</a></li>
    <li class="tab5"><a href="?">titel</a></li>
</ul>

.tabs {
    float: left;
    background-color: red;
    overflow: hidden;
    list-style: none; /* this is the list... */

    /* this is just to dempnstrate how the ul should contain the elements */
}

.tabs li {
    float: left;
}

.tabs a {
    display: block;
    float: left;
    padding: 1em 2em;

    background-color: rgba(0,0,0,.1);
    margin-right: 1em;
}



.tab1 a {
    background-color: orange;
}

    .tab1 a:hover { /* example :hover */        
    background-color: #f06;
    }

    .tab1 a:active { /* example :active */        
    background-color: #000;
    }

.tab2 a {
    background-color: yellow;
}

.tab3 a {
    background-color: lime;
}

.tab4 a {
    background-color: lightblue;
}

.tab5 a {
    background-color: pink;
}