css - 无法应用第一个和最后一个子 CSS

Question

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

<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。要定位第一个和最后一个 li 的 a:

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

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

JS Fiddle demo .