不能申请第一个和最后一个孩子CSS

Question

我创建了导航菜单，但无法解决菜单中第一个和最后一个元素的问题。所以我申请元素：第一个孩子和最后一个孩子。但它不起作用。

<div id="navigation"> 
    <ul> 
    <li class="active"><a href="#">One</a></li> 
    <li><a href="#">Two</a></li> 
    <li><a href="#">Three</a></li> 
    <li><a href="#">Four</a></li> 
    <li><a href="#">Five</a></li> 
    <li><a href="#">Six</a></li> 
    </ul> 
</div> 

和CSS文件

#navigation li{ 
font-family: 'PT Sans', Arial, sans-serif; 
font-size: 18px; 
list-style: none; 
display: inline-block; 
line-height: 60px; 
} 

#navigation li a { 
color: #fff; 
text-decoration: none; 
font-weight: bold; 
} 

#navigation li a:first-child { 
color: #f0f0f0; 
} 

#navigation li a:last-of-type { 
color: #000; 
} 

例如我创建 - http://jsfiddle.net/t48Qm/

Answer 1

这是因为所有的a元素是只有孩子，因此都是在:first-child和的其父母li的:last-child元素。要瞄准第一的a，而去年，li：

li:first-child a { 
    /* CSS here */ 
} 

li:last-child a { 
    /* CSS here */ 
} 

JS Fiddle demo。