結構性偽類選擇器—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;
}
