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

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 伪选择器

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;