-1

li元素用于在购物车中创建面包屑。面包屑使用为 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 选项卡中的内容。由于未知原因，只有当鼠标悬停在最后一个锚文本时才会出现黑色颜色。如何使最后一个锚文本始终变黑？

.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;
}
4

5 回答 5

1

要更改最后一个列表项中锚点的颜色，请使用： 

.last a{
    color:black;
}

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

li:last-child a{
    color:black;
}
于 2013-04-24T08:59:33.540 回答
1

以下css将解决问题，

.last a{
    color:Black;
}

http://jsfiddle.net/tUuzn/

于 2013-04-24T09:03:36.070 回答
0

Why don't you create a selected css class and add that class to the last breadcrumb using jquery when the page is loaded?

.selected a { color: black; }

<script type="text/javascript">
    $(function () {
        $("li.last", $("#breadCrumb").addClass("selected");
    });
</script>
于 2013-04-24T08:42:22.933 回答
0

使用:last-child选择器

li:last-child
{
 color:Black !important;
}
于 2013-04-24T08:45:12.947 回答
0 
li.last a{color : black;}
li:last-child a{color : black;}
于 2013-04-24T09:33:40.970 回答