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:171751browse
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!