は、背景画像を削除し、最後の李

Question

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)です。とにかくそれを止めるにはありますか？

Answer 1

ただ、CSSにこれを追加し、それが

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

を助けるかもしれない。しかし、それはあなたがまた、このように書くことができIE8

Answer 2

の下に適切に動作しません：

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

ファースト閉じるUL

Answer 3

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

これはすべてのCSS対応ブラウザで機能します。多少不器用ですが、クラスセレクタの使用は最も安全です。不器用さの要素は、単一のリストの問題ではなく、むしろ無関係です。