最后一个孩子似乎没有工作[关闭]答案

【问题标题】：Last-child doesn't seem to be working [closed]最后一个孩子似乎没有工作[关闭]
【发布时间】：2012-06-22 23:01:29
【问题描述】：

这是我的代码：

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

【问题讨论】：

它应该做什么？什么不起作用？对我来说看起来不错..
您在哪个浏览器中尝试过？ :last-child 仅适用于最近的浏览器：caniuse.com/#search=last-child
@deathApril，最后一个项目在悬停在它上面时有方角。旁白：我非常感谢我能够为更新的浏览器设计并使用 border-radius 和 linear-gradient 而不是图像......
Ewww，用相同的背景图片 URL 重新声明的速记样式重复六次。
安德鲁，这是一个很好的例子，说明为什么适当的缩进和间距不仅仅是个人喜好。修复代码后，可以很容易地发现问题（请参阅hawaii.five-0's answer）。

标签： html css css-selectors

【解决方案1】：

在您的 CSS 示例中，您在 first-child a:hover 中缺少右花括号 }。

【讨论】：

这是一个大括号，这个)是一个括号。
所以 CSS 不是一段代码，它是一个专有名词；那些反引号不应该在它周围。