使最後一個類別無瑕

Question

我想讓最後一個類別沒有底部邊框，是否有任何詭計沒有編程完成它？

HTML & CSS：

<style> 
#menu { 
    border:1px red solid;padding:10px 
} 
#menu a { 
    display:block; 
    border-bottom:1px #000 dotted 
} 
</style> 
<div id="menu"> 
    <p>MAIN MENU</p> 
    <a>Computers</a> 
    <a>Design</a> 
    <a>Programming</a> 
</div> 

例： http://jsfiddle.net/GLJWp/

Answer 1

你可以試試這個，因爲last-child不IE

HTML

<div id="menu"> 
    <p>MAIN MENU</p> 
    <a>Computers</a> 
    <a>Design</a> 
    <a>Programming</a> 
</div>​ 

CSS

#menu{ 
    border:1px red solid;padding:10px 
} 
#menu a{ 
    display:block; 
    border-top:1px #000 dotted 
} 

工作

以下的p後，將實現第一a，a:first-child不會在IE瀏覽器，因爲p是第一個子元素

#menu p + a{ 
    border-top: none; 
} 

DEMO。

Answer 2

看一看在:last-child僞類，適用的CSS規則只在最後一個項目：http://www.quirksmode.org/css/firstchild.html

在這種情況下，您可以使用最後一個鏈接的樣式：

#menu a:last-child {border-bottom:none} 

對於支持IE < 9，看看this beautifully horrible conditional stylesheet hack。

Answer 3

在這裏完成：http://jsfiddle.net/GLJWp/2/