css - 不同的 :hover for first link in a list

我的 HTML 代码:

<nav>
    <ul>
        <li><a href="#">Link1</a></li>
        <li><a href="#">Link2</a></li>
        <li><a href="#">Link3</a></li>
    </ul>
</nav>

如果我写

nav ul li a:hover{}

它将为所有链接创建hover。

如何创建第一个链接 "Link1" 会有不同 hover 的句子？

最佳答案

使用 :first-child 伪选择器

nav ul li:first-child a:hover {
  color: red
}

<nav>
  <ul>
    <li><a href="#">Link1</a>
    </li>
    <li><a href="#">Link2</a>
    </li>
    <li><a href="#">Link3</a>
    </li>
  </ul>
</nav>

关于css - 不同的 :hover for first link in a list，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26344780/