Home >Web Front-end >CSS Tutorial >css3 cancels the upper and lower list separation lines
css3 cancels the upper and lower list separation lines
- php中世界最好的语言Original
- 2018-03-21 17:07:311731browse
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(~)
<!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 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 )
<!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, 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
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!
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：Draw a concentric circle using css3Next article：Draw a concentric circle using css3