Question

我希望最后一个菜单项为蓝色，我正在尝试使用psuedo-class 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;
}

Answer 1

请注意#access a是a的唯一#access,子项，其余链接都包含在LI中，因此LI是孩子，不是A。

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

Answer 2

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

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

#access ul li:last-child a {
}

Answer 3

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

来自W3C：

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

当你说：

#access a:last-child

您正在寻找属于a元素的元素#access的最后一个子元素。但a 没有孩子，因此无法正常使用。

您可能希望查找a的父级：

#access ul li:last-child a

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

伪阶级：最后一个孩子的怪异

3 个答案: