How to use css3 to set the list spacing line without the top and bottom

This article mainly explains "how to use css3 to set no list spacing line above and below". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use css3 to set no list spacing line above and below".

Effect picture:

Method 1: universal sibling selector (~)

Document ul {margin: 0; padding: 0;} li {list-style: none; height: 50px; line-height: 50px;} li~li {border-top: 1px solid # 000;} 1 2 3 4 5 6

The ~ symbol in li~li {...} is called a universal sibling selector and matches the P element after the P element, so the first P element does not match.

Method 2: pseudo-class selector (: first-of-type /: last-of-type)

Document 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;} 1 2 3 4 5 6

First set all li to border-top, then find the first li with: first-of-type, and cancel border-top.

Thank you for your reading, the above is "how to use css3 to set no upper and lower list spacing line" content, after the study of this article, I believe you have a deeper understanding of how to use css3 to set no upper and lower list spacing line, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!