jquery - 如何更改 li 最后一个 anchor 颜色

Question

li 元素用于在购物车中创建面包屑。面包屑使用为 site.css 中的元素定义的样式显示所有 anchor 元素如何将最后一个 anchor 颜色设为黑色？

我尝试了下面的样式。仅当鼠标悬停在元素上时才会出现背景色。如果鼠标不在上面，如何使链接文本变黑？

jquery jBreadCrumb 来自 http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html用于将列表转换为面包屑。使用 jquery、jquery-ui、ASP.NET MVC2。

html:

<div id="breadCrumb" class="breadCrumb module">
<div style="overflow:hidden; position:relative; width: 990px;">
<div>
<ul style="width: 5000px;">
<li class="first">
<a href="/"></a>
</li>
<li>
<a href="/Store/Category?category=1">Level1</a>
</li>
<li>
<a href="/Store/Category?category=28">level2</a>
</li>
<li class="last">
<a href="/Store/Browse?category=37521">level3shouldbeblack"</a>
</li>
</ul>
</div>
</div>
</div>

CSS:

.breadCrumb ul li.last, .last, .last:hover, .last:link, .last:visited, .last:active  {
    color:Black !important;
}

更新

我添加了 li:last-child 但问题仍然存在。以下是 FireBug Sytle 选项卡中的内容。出于未知原因，只有当鼠标悬停在最后一个 anchor 文本上时，才会出现黑色颜色。如何使最后一个 anchor 文本始终变黑？

.breadCrumb ul li a {
    display: block;
    float: left;
    height: 21px;
    line-height: 21px;
    overflow: hidden;
    position: relative;
}
a:link, a:visited {
    text-decoration: none;
}
.breadCrumb ul li.last, .last, .last:hover, .last:link, .last:visited, .last:active {
    color: Black !important;
}
.breadCrumb ul li {
    font-size: 0.9167em;
    line-height: 21px;
}
li:last-child {
    color: Black !important;
}
.breadCrumb ul li.last, .last, .last:hover, .last:link, .last:visited, .last:active {
    color: Black !important;
}
body {
    font-family: Helvetica,Arial,sans-serif;
}

Answer 1

要更改last list-item 中anchor 的颜色，请使用:

.last a{
    color:black;
}

这也可以，使用 :last-child选择器:

li:last-child a{
    color:black;
}