Home > Article > Web Front-end > css3 setting example of list spacer method without upper and lower edges

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

小云云Original: 2017-12-19 10:16:171731browse

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>

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>

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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to turn website pages gray with CSSNext article：How to turn website pages gray with CSS

See more

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

Related articles