jquery - liの最後のアンカーの色を変更する方法

Question

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

Answer 1

最後のlist-itemのアンカーの色を変更するには、次を使用します。

.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

selectedcss クラスを作成し、ページの読み込み時に jquery を使用してそのクラスを最後のパンくずリストに追加してみませんか?

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