css3 cancels the upper and lower list separation lines-CSS Tutorial-php.cn

css3 cancels the upper and lower list separation lines

php中世界最好的语言

Release： 2018-03-21 17:07:31

Original

1755 people have browsed it

This time I will bring you css3 to cancel the upper and lower list separation lines. What are the precautions for canceling the upper and lower list separation lines in css3? The following is a practical case, let's take a look.

Rendering:

Method one: Universal sibling selector(~)

<!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>

Copy after login

li~li {...} The ~ symbol is called a universal sibling selector, matching the P element after the P element , so the first P element will not be matched.

Method 2: Pseudo Class Selector ( :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>

Copy after login

First set border-top for all li, then use: first-of-type to find the first li and cancel border-top.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!