为什么我的a：hover：n-child代码工作不正常？

Question

这种简单的代码是不工作：

HTML：

<div id="topnav"> 
    <ul> 
     <li><a href="a.html">Aaaaaaa</a></li> 
     <li><a href="b.html">Bbbbbbbb</a></li> 
     <li><a href="c.html">Ccccccccc</a></li> 
    </ul> 
</div> 

CSS：

#topnav li a:hover:first-child{ 
    color:#ff0000; 
    } 

#topnav li a:nth-child(2):hover{ 
    color:#FF7700; 
} 

#topnav li a:nth-child(3):hover{ 
    color:#FFFF00; 
} 

每一个环节都要有不同的悬停颜色。所有这些都显示为红色。为什么？

的jsfiddle：http://jsfiddle.net/jeZHD/

Answer 1

因为只有一个<a>每父元素。这意味着，每个<a>是其父母<li>的第一个孩子。

改为在<li>上尝试。

工作例如：http://jsfiddle.net/jeZHD/2/

Answer 2

这里：

#topnav li:nth-child(1) a:hover { color:#ff0000; } 
#topnav li:nth-child(2) a:hover { color:#FF7700; } 
#topnav li:nth-child(3) a:hover { color:#FFFF00; } 

Answer 3

在此浪费那么多时间后，我才意识到，第n个孩子应该在li的，而不是a的。像这样：

#topnav li:first-child a:hover{ 
    color:#ff0000; 
    } 

#topnav li:nth-child(2) a:hover{ 
    color:#FF7700; 
    } 

    #topnav li:nth-child(3) a:hover{ 
    color:#FFFF00; 
    }