不同:将鼠标悬停在列表中的第一个链接

Question

我的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"将有不同悬停的句子？

Answer 1

使用: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>