本文主要介紹了關(guān)于利用css3如何設(shè)置沒(méi)有上下邊的列表間隔線(xiàn)的相關(guān)內(nèi)容，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：
效果圖：
方法一：通用兄弟選擇器（ ~ ）
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width"> <style> ul {margin: 0; padding: 0;} li { list-style: none; height: 50px; line-height: 50px;} li~li {border-top: 1px solid #000;} </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></body></html> |
li~li {...} 中的 ~ 符號(hào)稱(chēng)為通用兄弟選擇器，匹配P元素之后的P元素，所以第一個(gè)P元素不會(huì)匹配到。
方法二：偽類(lèi)選擇器（ :first-of-type / :last-of-type ）
| <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta name="viewport" content="width=device-width"> <style> 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;} </style></head><body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul></body></html> |
首先將所有 li 設(shè)置 border-top，然后用 :first-of-type 查找到第一個(gè) li ，取消border-top。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)錯(cuò)新站長(zhǎng)站的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
