Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use css: not () to solve the problem of lists frame, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Use: not () to solve the problem of lists border

In web design, we usually use the: last-child nth-child selector to override the style that was originally declared on the parent selector. For example, a navigation menu creates a separator for each link Link by using borders, and then adds a rule to remove the border of the last link

.nav li {border-right: 1px solid # 666;} .nav li:last-child {border-right: none;}

This is a confusing way that not only forces the browser to render in one way, but then undoes it through a specific selector. This overlay style is inevitable. Most importantly, however, we can use only one style on the elements you want to declare by using: not pseudo-class:

.nav li:not (: last-child) {border-right: 1px solid # 666;}

The above is, except for the last li, all .nav li are added border style, isn't it very simple!

Of course, you can also use .nav li+li or .nav li:first-child ~ li, but not is more semantic and easier to understand.

The above is all the content of the article "how to use css: not () to solve the problem of lists borders". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.