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