伪选择器的问题

Trouble with pseudo selector

我需要 select 一个接一个 <a></a> 并使用 :hover 效果改变颜色

<nav class="navbar2 navbar-fixed-top">
    <div class="container">

            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Follow:</a></li>
                <li><a href="#"><i class="fa fa-facebook-square"></i></a></li>
                <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                <li><a href="#"><i class="fa fa-instagram"></i></a></li>
                <li><a href="#"><i class="fa fa-google-plus-square"></i></a></li>

            </ul> 

      </div>
</nav>

.navbar2 .navbar-nav > li > a:nth-of-type:hover(3) {
  color:red;
}

所以第三个应该悬停在红色?!那么?

navbar2 .navbar-nav > li:nth-of-type(3) > 
    a:hover {
     color:red;
}