0

HTML

<div>
<ul class="menubar">
 <li>home</li>
 <li>product</li>
 <li>about us</li>
 <li>contact us</li>
</div>

CSS

.menubar li
{
    float: left;
    position: relative; 
    display: block;
    text-decoration: underline;
    text-transform:capitalize
    background:url(../image/rightborder.png) no-repeat right center;
}

.menubar li:hover
{   

    background: #FF0000 ; 
    color: #FFFFFF;
}

この作業は正常に機能していますが、問題はbackground:url(../image/rightborder.png)最後のメニュー「お問い合わせ」の後に来ることです。とにかくそれをオフにすることはありますか？

4

3 に答える 3

2

これをCSSに追加するだけで、役立つ場合があります

.menubar li:last-child { background:none}

ただし、IE8より下では正しく機能しません

于 2012-05-09T05:21:24.620 に答える
2

class最後の項目に属性を追加します。たとえば<li class=last>contact us</li>、ルールを追加し.menubar li.last { background-image: none; }ます。

これは、CSS対応のすべてのブラウザで機能します。やや不器用ですが、クラスセレクターの使用が最も安全であり、単一のリストの問題である場合、不器用な要素はかなり無関係です。

于 2012-05-09T05:26:36.280 に答える
0

次のように書くこともできます：

.menubar li + li
{
    background:url(../image/rightborder.png) no-repeat left center;
}

まずULを閉じます

于 2012-05-09T05:22:48.300 に答える