從最後一個導航列表項刪除邊框

我把它設置爲在每個項目的右側有一個邊框來分隔每個項目。我期待這個邊框只在中間的物品上，而不是在最後一個物品上。

HTML：

<div id="container-navigation"> 
    <ul id="navigation"> 
     <li><a href="index.html" target="_self">home</a></li> 
     <li><a href="aboutus.html" target="_self">about</a></li> 
     <li><a href="solutions.html" target="_self">solutions</a></li> 
     <li><a href="training.html" target="_self">training</a></li> 
     <li><a href="payments.html" target="_blank">payments</a></li> 
     <li><a href="contact.html" target="_self">contact</a></li> 
    </ul> 
</div>

CSS：

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-right: 1px solid #ffffff; 
}

什麼是完成這一任務的最好方法是什麼？給最後一個項目一個獨特的類並創建另一個CSS條目？

來源

2013-08-31 AlexBeau

你想支持哪些瀏覽器？ – PhearOfRayne

嘗試：最後孩子選擇器，簡單的方法。

#navigation li a:last-child { 
    border-right: none; 
}

來源

2013-08-31 00:55:45 darthsoup

它應該是'#navigation li：last-child a'。 – thgaskell

是的，你是對的，但它不會刪除邊框，因爲它在一個標籤。 – darthsoup

它適用於'a'。但是你需要選擇最後的'li'，而不是每個'li'的最後''a'（這適用於每個'a'，因爲每個'li'只有一個'a'. – thgaskell

如果是我，我會在邊界移動到左邊，而不是權利：

#navigation li a { 
    border-left: 1px solid #ffffff; 
}

然後我會用first-child，因爲它具有良好的跨瀏覽器兼容。

#navigation li:first-child a { 
    border-left: 0 none; 
}

來源

2013-08-31 01:10:23 tw16

至於建議的thgaskell，這裏是做的一種方式：

#navigation li a { 
    color: green; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-right: 1px solid red; 
} 
#navigation li:last-child a { 
    border-right: none; 
}

演示在：http://jsfiddle.net/audetwebdesign/G3mD9/

注：的last-child僞類支持IE9 +，所以有點比first-child更有限，這對IE7 +很有用。

來源

2013-08-31 01:10:40

如果您需要支持舊版瀏覽器（IE7 +等），您應該從右側向左側翻轉邊框，以便您可以使用css選擇器first-child。

從此改變當前的CSS：

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-right: 1px solid #ffffff; 
}

要：

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
    border-left: 1px solid #ffffff; 
} 

#navigation li:first-child a { 
    border-left: none; 
}

EXAMPLE FIDDLE

來源

2013-08-31 01:11:08 PhearOfRayne

關於IE7 +支持的好處，與僅適用於IE9 +的「last-child」形成鮮明對比（投票結果:) –

創建新的ID或類名最後一個列表項目，然後給喜歡的樣式，

#id_name a { border-right:none !important; }

來源

2013-08-31 01:12:19 tamilsiva

您不需要'！important'選項，這個id本身會增加足夠的規則特異性，以至於無法使用主CSS規則。 –

作爲第一個孩子的替代方案，您還可以使用相鄰的兄弟選擇器來獲得IE7 +支持。它也需要像其他解決方案一樣從邊界轉向左邊界。

#navigation li a { 
    color: #ffffff; 
    line-height: 22px; 
    font-size: 11px; 
    text-decoration: none; 
    padding: 5px 15px 6px 15px; 
} 
#navigation li + li a { 
    border-left: 1px solid #ffffff; 
}

來源

2013-08-31 01:24:09 mikel

從最後一個導航列表項刪除邊框

回答

相關問題