Home > Article > Web Front-end > css3 cancels the upper and lower list separation lines

css3 cancels the upper and lower list separation lines

php中世界最好的语言Original: 2018-03-21 17:07:311707browse

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>

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>

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!

css3 cancels the upper and lower list separation lines

Related articles