Question

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

我试过下面的风格。仅当鼠标位于元素上时才会出现背景颜色。如果鼠标不在它之上，如何使链接文本变黑？

来自http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html的jquery jBreadCrumb用于将列表转换为痕迹。使用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选项卡中的内容。对于unknow reasonblack colo仅在鼠标悬停在最后一个锚文本时出现。如何使最后一个锚文本始终变黑？

.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 a{
    color:black;
}

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

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

Answer 2

以下css将解决问题，

.last a{
    color:Black;
}

http://jsfiddle.net/tUuzn/

Answer 3

为什么不在页面加载时使用jquery创建一个selected css类并将该类添加到最后一个痕迹中？

.selected a { color: black; }

<script type="text/javascript">
    $(function () {
        $("li.last", $("#breadCrumb").addClass("selected");
    });
</script>

Answer 4

使用 ：last-child 选择器

li:last-child
{
 color:Black !important;
}

Answer 5

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

如何改变李的最后一个锚色

5 个答案: