css3 setting example of list spacer method without upper and lower edges-CSS Tutorial-php.cn

css3 setting example of list spacer method without upper and lower edges

小云云

Release： 2017-12-19 10:16:17

Original

1689 people have browsed it

This article mainly introduces how to use CSS3 to set a list interval line without upper and lower edges. The article shares two solutions, namely using the universal sibling selector (~) and the pseudo-class selector (:first-of- type / :last-of-type), detailed sample code is given for your reference and study, let’s take a look below. Hope it helps everyone.

Rendering:

Method 1: 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 in .} is called a universal sibling selector, which matches 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, and then use :first-of -type finds the first li and cancels border-top.

Related recommendations:

CSS3 Example of Gradually Glowing Square Border

Steps to Optimize HTML5 Forms with CSS3

How to implement radio button animation effects in CSS3

The above is the detailed content of css3 setting example of list spacer method without upper and lower edges. For more information, please follow other related articles on the PHP Chinese website!