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

【问题标题】：How to change the color of each link for the nav bar?如何更改导航栏每个链接的颜色？
【发布时间】：2020-12-03 01:47:13
【问题描述】：

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

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

我的代码：

nav li a {
    color: #F73139;
}

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

【问题讨论】：

标签： html css nav

【解决方案1】：

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

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>

【讨论】：

【解决方案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>

【讨论】：