The not() selector in CSS3 implements the last line of li code to remove a certain css style-CSS Tutorial-php.cn

The not() selector in CSS3 implements the last line of li code to remove a certain css style

不言

Release： 2018-06-14 17:19:55

Original

4007 people have browsed it

This article mainly introduces the code of not() selector in CSS3 to implement the last line of li to remove certain css styles. It has certain reference value. Now I share it with you. Friends in need can refer to it

In daily development, we often encounter that the last li in the loop is different from other li. To remove a certain css style, this article introduces the use of the new :not() pseudo-class selector in CSS3 to achieve It is very convenient to use. Friends who are interested can come and take a look below.

What is used in this article is the new :not() pseudo-class selector in CSS3, which can match elements that do not contain selectors. Suppose there is a list, each list item has a bottom line, but the last item does not need a bottom line

The example code is as follows:

<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>使用:not() 最后一行li不添加边框</title>
<style type="text/css"></p>
<p>/* 
    使字体在所有设备上都达到最佳的显示
*/
html { 
 -moz-osx-font-smoothing: grayscale; 
 -webkit-font-smoothing: antialiased; 
 text-rendering: optimizeLegibility; 
}</p>
<p>/*
    给body添加阴影
*/
body:before {
 content: "";
 position: fixed;
 top: -10px;
 left: 0;
 width: 100%;
 height: 10px;
 -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 box-shadow: 0px 0px 10px rgba(0,0,0,.8);
 z-index: 100;
}</p>
<p>/*
 设置列表
*/
.listItem {
    border: 1px solid red;
}
.listItem ul {
    width: 100%;
    overflow:hidden;
}
.listItem ul,listItem li {
    margin:0;
    padding:0;
    list-style:none;
}
.listItem li {
   margin-left:10px;
}
/*
    li 最后一个元素不添加边框
*/
.listItem li:not(:last-child) {
    border-bottom:1px solid green;  
}
/*
    与第一个li相连兄弟
*/
.listItem  li:first-child ~ li { border-left: 1px solid #666; }
</style>
</head></p>
<p><body></p>
<p> <p class="listItem">
     <ul>
            <li>列表1</li>
            <li>列表2</li>
            <li>列表3</li>
            <li>列表4</li>
            <li>列表5</li>
        </ul>
    </p>
</body>
</html>

Copy after login

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Analysis on CSS3’s UI element status pseudo-class selector

CSS3’s default pseudo-class selector Parse

The above is the detailed content of The not() selector in CSS3 implements the last line of li code to remove a certain css style. For more information, please follow other related articles on the PHP Chinese website!