CSS实现循环使用不同效果

我曾经在学习CSS的时候有看到一个做标签的案例，博客的标签一般都是采用的彩色的标签方式，每个标签显示着不同的颜色效果。但是前端做出来可以给每个元素设定不同的效果，但是如果要使用B端语言进行循环的话，这里的CSS是无法对每一个循环使用不同的选择器的。

后来终于通过查阅资料找到了CSS3中的一个方法可以实现！

选择器:nth-last-child(n)

这个可以选择某个选择器里面的第N个元素来控制效果。这样就可以通过前端设置N个元素来控制N个CSS效果！

例如，我需要对一个ul里面的li使用不同的效果，让每个li显示不同的背景颜色！

• 菜单1
• 菜单2
• 菜单3
• 菜单4
• 菜单5

    <style>
        .navtest{
            width: 100%;
            list-style: none;
            margin-top: 15px 0px;
            color: white;
            display: block;
            overflow: hidden;
        }
        .navtest li{
            float: left;
            padding: 30px;
            margin-left: 30px;
        }
        .navtest li:nth-last-child(1){
            background-color: teal;
        }
        .navtest li:nth-last-child(2){
            background-color: rebeccapurple;
        }
        .navtest li:nth-last-child(3){
            background-color: yellow;
            color: black;
        }
        .navtest li:nth-last-child(4){
            background-color: gray;
        }
        .navtest li:nth-last-child(5){
            background-color: darkorange;
        }
    </style>
//html
        <ul class="navtest">
            <li>菜单1</li>
            <li>菜单2</li>
            <li>菜单3</li>
            <li>菜单4</li>
            <li>菜单5</li>
        </ul>