最后一个孩子似乎没有工作

Question

这是我的代码：

HTML：

<div id="nav">
 <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
 </ul>
</div>

CSS：

#nav ul li a {
 width:162px;
 background:url('http://i.imgur.com/DmeCv.png') -164px 0px;

#nav ul li:first-child a {
 width:164px;
 background:url('http://i.imgur.com/DmeCv.png');
}

#nav ul li:last-child a {
 background:url('http://i.imgur.com/DmeCv.png') -326px 0px;
}

到目前为止，这么好。这样可以正常显示图像。

#nav ul li a:hover {
 background:url('http://i.imgur.com/DmeCv.png') -164px -50px;
}

#nav ul li:first-child a:hover {
 background:url('http://i.imgur.com/DmeCv.png') 0px -50px;

#nav ul li:last-child a:hover {
 background:url('http://i.imgur.com/DmeCv.png') -326px -50px;
}

然而，这不起作用。它显示中段悬停图像，而不是最后一个子悬停图像。

以下是一个例子：

http://result.dabblet.com/gist/2973127/8bf204a16e7caca43ad129cad141fa4810bf18ce

Answer 1

在您的CSS示例中，您错过了}中的结束大括号first-child a:hover。