我创建了导航菜单,但无法解决菜单中第一个和最后一个元素的问题。所以我申请元素:first-child和:last-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/