css3 cancels the upper and lower list separation lines

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

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

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

Recommended reading:

Detailed explanation of the filter attribute of CSS3

Optimization single Styles of select boxes and check boxes

##Underlying rules for CSS priority calculation

The above is the detailed content of css3 cancels the upper and lower list separation lines. For more information, please follow other related articles on the PHP Chinese website!