爲什麼我的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; 
    }