html - 最後の子が機能していないようです

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。