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

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 (~)

nbsp;html>


    <meta>
    <title>Document</title>
    <meta>
    <style>
        ul {margin: 0; padding: 0;}
        li { list-style: none; height: 50px; line-height: 50px;}
        li~li {border-top: 1px solid #000;} 
    </style>


    

        
• 1
        
• 2
        
• 3
        
• 4
        
• 5
        
• 6
    

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 )

nbsp;html>


    <meta>
    <title>Document</title>
    <meta>
    <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>


    

        
• 1
        
• 2
        
• 3
        
• 4
        
• 5
        
• 6
    

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!