Html UL列表-不同颜色的项目符号

是否有可能更改ul li元件上每个单独项目符号图标的颜色（甚至在每个图标上使用不同的图像）？因此，1是绿色，2是蓝色，3是黄色等通过CSS

这是我的小单子，如果可能的话，我想把子弹弄大一些

<nav class="navigation-list">
    <ul>
        <li><a href="/" class="active">home</a></li>
        <li><a href="/About-Us" >about us</a></li>
        <li><a href="/Products" >products</a></li>
        <li><a href="/Contact-Us" >contact us</a></li>
        </ul>
</nav>

这就是我想要的：

---

如果要定义一个模式，例如每三个元素都是黄色的，则需要为每个列表项更改第n个子元素+1。第二个项目符号将是红色的，然后可以使用第n个子类实现

#header .navigation-list ul li:nth-child(3n) { color:green; }
#header .navigation-list ul li:nth-child(3n+1) { color:blue; }
#header .navigation-list ul li:nth-child(3n+2) { color:yellow; }

---

如果你想实现不同的颜色，那么你需要给每个li添加不同的

颜色。你不能自动循环一个颜色范围（我认为这是问题的目的），但是你可以明确地为一个特定列表项的项目符号指定一个特定的颜色。或者最好的方法是给每个li添加不同的类。@u格林先生，这看起来很愚蠢。但是效果很好。这也会改变段落的颜色。您需要更改属性的样式：li a{color:#000；}还记得有什么方法可以增加项目符号的大小吗？@JordanC26使用
font size
。当然，@Mr#Green是正确的。这是因为您正在使用文本添加项目符号。您可以像处理CSS中的文本一样处理它。字体大小，文字装饰你的名字。
ul{
   list-style-type: none;
   list-style-position: outside;
   list-style-image: none;
}

li:before {
   content: "• ";
}


.navigation-list ul li:nth-child(1){
   color: red; /* or whatever color you prefer */
}

.navigation-list ul li:nth-child(2){
   color: blue; /* or whatever color you prefer */
}

#header .navigation-list ul li:nth-child(3n) { color:green; }
#header .navigation-list ul li:nth-child(3n+1) { color:blue; }
#header .navigation-list ul li:nth-child(3n+2) { color:yellow; }