结构性伪类选择器—last-child
与“:first-child”选择器作用类似,不同的是“:last-child”选择器选择的是元素的最后一个子元素。
例如,需要改变的是列表中的最后一个“li”的背景色,就可以使用这个选择器,
ul>li:last-child{background:blue;}在博客的排版中,每个段落都有15px的margin-bottom,假设不想让博客“post”中最后一个段落不需要底部的margin值,可以使用“:last-child”选择器。
HTML代码:
<div> <p>第一段落</p> <p>第二段落</p> <p>第三段落</p> <p>第四段落</p> <p>第五段落</p> </div>
CSS代码:
.post {
padding: 10px;
border: 1px solid #ccc;
width: 200px;
margin: 20px auto;
}
.post p {
margin:0 0 15px 0;
}
.post p:last-child {
margin-bottom:0;
}演示结果:
第一段落 第二段落 第三段落 第四段落 第五段落
index.html代码:
<!DOCTPE HTML> <html> <head> <meta charset="utf-8"> <title>结构性伪类选择器——last-child</title> <link href="stle.css" rel="stylesheet" type="text/css"> </head> <body> <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> <li>Item5</li> <li>Item6</li> </ul> </body> </html>
stle.css代码:
ul{
border:1px solid #ccc;
list-style:none outside none;
width:220px;
margin:20px auto;
padding:0;
}
ul > li{
list-style:none outside none;
margin:0;
padding:10px;
border-bottom:3px solid #ccc;
}
ul > li:last-cild{
border-bottom:none;
}
