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