伪类：last-child 怪异答案

【问题标题】：pseudo-class :last-child weirdness伪类：last-child 怪异
【发布时间】：2011-04-12 06:06:30
【问题描述】：

我希望最后一个菜单项是蓝色的，我正在尝试使用伪类a:last child 来完成此操作。奇怪的是，它将规则应用于菜单中间看似随机的a:link。你能告诉我为什么吗？

网站： http://www.robert-wright-books.com/STAGE

CSS：

#access {
 background: transparent;
 float: left;
 font-size: 1.4em;
 text-transform: uppercase;
 overflow: hidden;
 width: 238px;
 margin: 36px 0 0 18px;
}
#access a:last-child {  color: #006ccf }
#access ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 margin-bottom: 0;
}
#access ul li { border-bottom: 1px dotted #957e5e }
#access ul li:last-child { border-bottom: none }
#access ul li a,
#access ul li a:hover,
#access ul li a:visited {
 color: #432f00;
 display: block;
 padding: 6px 24px;
 line-height: 17px;
 text-decoration: none;
}

【问题讨论】：

我没有看到任何随机的蓝色元素。你用的是什么浏览器？
我假设您在 IE 或其他东西中进行测试，因为它在 firefox 中很好。
我正在所有浏览器中进行测试。也就是：FF、IE、Safari、Chrome、Opera。这很奇怪 - 在 FF 中，“链接”菜单项是蓝色的，但在其余部分中，除了“家”之外，它们都是蓝色的。
有点跑题了，但是还有其他人看到这里突出显示的奇怪代码吗？这是一张图片：i.imgur.com/mHgcA.png
是的，我也注意到了。什么给了？

标签： html css stylesheet css-selectors

【解决方案1】：

考虑到#access a 是#access, 的唯一a 子级，其余链接都包含在LI 中，因此LI 是子级，而不是A。

#access ul li:last-child a 指向最后一个菜单项。

【讨论】：

【解决方案2】：

所有链接都是其父级（li）的最后一个也是唯一一个子级。

您需要定位最后一个 li 并为其链接设置样式：

#access ul li:last-child a {
}

【讨论】：

【解决方案3】：

我猜你没有正确使用:last-child。

来自W3C：

:last-child 伪类表示一个元素，它是某个其他元素的最后一个子元素。

当你说：

#access a:last-child

您正在寻找属于#access 元素的元素a 的最后一个子元素。但是a 没有没有孩子，所以这不能正常工作。

您可能想查找a 的父母：

#access ul li:last-child a

此代码查找ul 的最后一个子元素并选择它的a 元素（只有一个）。

【讨论】：

你需要#access li:last-child a。 ul:last-child 正在寻找最后一个 ul，反正只有一个。