css3取消上下邊的列表間隔線

來源:互聯網
上載者:User
這次給大家帶來css3取消上下邊的列表間隔線,css3取消上下邊的列表間隔線的注意事項有哪些,下面就是實戰案例,一起來看一下。


方法一:通用兄弟選取器( ~ )

<!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 {...} 中的 ~ 符號稱為通用兄弟選取器,匹配P元素之後的P元素,所以第一個P元素不會匹配到。

方法二:偽類別選取器( :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 設定 border-top,然後用 :first-of-type 尋找到第一個 li ,取消border-top。

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

CSS3的filter(濾鏡)屬性詳解

最佳化單選框、複選框的樣式

CSS優先順序計算的底層規則

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.