css去掉新聞列表最後一個新聞的下劃線

admin發表於2017-11-01
CSS

本章節分享一個比較使用的效果，那就是如何去掉新聞列表最後一個新聞的下劃線。

在很多新聞列表效果中，在每一個新聞下面都有一個虛線或者其他什麼形式的下劃線，總之感覺有比較美觀的，但是往往最後一個新聞是不需要這個下劃線的，下面介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0;
  padding:0;
}
#antzone li{
  border-bottom:1px #ccc dotted;
  font-size:12px;
  height:25px;
  line-height:25px;
}
#antzone li:last-of-type{
  border-bottom:none;
}
</style>
</head>
<body>
<div id="antzone">
  <ul>
    <li>螞蟻部落歡迎您，只有努力奮鬥才會有美好的明天。</li>
    <li>沒有人一開始就是高手，必須要通過努力。</li>
    <li>每一天都是新的，要好好的珍惜。</li>
    <li>分享互助是進步最大的源動力。</li>
    <li>之後當前的時間才是真實的，下一秒都是虛幻的。</li>
  </ul>
</div>
</body>
</html>

:last-of-type可以參閱CSS E:last-of-type偽類選擇器一章節。

相關文章