刪除最后一個邊框底部？

Question

我使用 li 顯示記錄列表。

每個 li 都有一個底部邊框：1px 純黑色；

但我不想在 li 的末尾顯示邊框？

例子：

.test li{
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
        border-bottom: 1px solid black;
    }

.test li.last { border-bottom: none;  }

<ul class="test">
  <li> Foo 1 </li>
  <li> Foo 2 </li>
  <li> Foo 3 </li>
</ul>

Foo 3 仍然顯示底部邊框。

Answer 1

.test li{
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
        border-bottom: 1px solid black;
    }

.test li:last-child { border-bottom: none;  }

Answer 2

您也可以設置頂部邊框，並使用兄弟選擇器來處理此問題，而無需額外的類：

.test li{
        height:1%;
        overflow:hidden;
        padding:4px 0;
        margin:-1px 0 0;
    }

.test li + li { border-top: 1px solid black;  }

Answer 3

將類添加到最后的li或者css3是否可接受

ul.test> li：last-of-type {border-bottom：none}

Answer 4

你也可以使用jquery

$('ul li:last-child').css('border-bottom', 'none');

我更喜歡這種方式，因為它意味着你的css中跳躍較少和瘋狂的異常異常。

Answer 5

請為此添加課程：

li:last-child { border-bottom: none; }

Answer 6

使用: :last-of-type和:not()

The:last-of-type 選擇器允許您定位元素在其容器中的最后一次出現。 它在 CSS Selectors Level 3 規范中定義為“結構偽類”，這意味着它用於根據內容與父級和兄弟級內容的關系來設置內容樣式。

 .test li{ height:1%; overflow:hidden; padding:4px 0; margin:-1px 0 0; }.test li:not(:last-of-type) { border-bottom: 1px solid black; }

 <ul class="test"> <li> Foo 1 </li> <li> Foo 2 </li> <li> Foo 3 </li> </ul>

文章鏈接： 在此輸入鏈接描述