css怎麼增加邊框沒有間隙

css增加邊框沒有間隙的方式如下

方法一：通用兄弟選擇器( ~ )

Document

ul {margin: 0 padding: 0}

li { list-style: none height: 50px line-height: 50px}

li~li {border-top: 1px solid #000}

1

2

3

4

5

6

li~li {...} 中的 ~ 符號稱爲通用兄弟選擇器，匹配P元素之後的P元素，所以第一個P元素不會匹配到。

方法二：僞類選擇器( :first-of-type / :last-of-type )

Document

ul {margin: 0 padding: 0}

li { border-top: 1px solid #000 list-style: none height: 50px line-height: 50px}

li:first-of-type {border-top: none}

1

2

3

4

5

6

首先將所有 li 設定 border-top，然後用 :first-of-type 查找到第一個 li ，取消border-top。