如何更改导航栏每个链接的颜色？

Question

我一直在搜索其他论坛，但找不到我正在寻找的答案。

我希望导航栏中的每个链接都是不同的颜色。 我现在有它们作为红色阴影，但我希望其他两个是蓝色和黄色。

我的代码：

 nav li a { color: #F73139; }

 <nav> <ul> <li><a>home</a></li> <li><a>work</a></li> <li><a>contact</a></li> </ul> </nav>

Answer 1

您可以使用:nth-child为它们分配不同的 colors ：

 nav li:nth-child(1) a { color: #F73139; } nav li:nth-child(2) a { color: blue; } nav li:nth-child(3) a { color: yellow; }

 <nav> <ul> <li><a>home</a></li> <li><a>work</a></li> <li><a>contact</a></li> </ul> </nav>

Answer 2

您还可以使用 CLASS 属性来命名该特定列表项

例如：

 li.one {color: red;} li.two {color: blue;} li.three {color: yellow;}

 <nav> <ul> <li class="one"><a>home</a></li> <li class="two"><a>work</a></li> <li class="three"><a>contact</a></li> </ul> </nav>