20. CSS3 结构性伪类选择器 :last-child
:last-child
选择器与:first-child
选择器作用类似,不同的是:last-child
选择器选择的是元素的最后一个子元素。例如,需要改变的是列表中的最后一个 li 的背景色,就可以使用这个选择器:
ul>li:last-child{ background:blue; }
示例演示
在博客的排版中,每个段落都有 15px 的margin-bottom
,假设不想让博客 post 中最后一个段落不需要底部的margin
值,可以使用:last-child
选择器。
HTML 代码:
<div class="post"> <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; }
效果如下:
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 20. CSS3 结构性伪类选择器 :last-child
码云笔记 » 20. CSS3 结构性伪类选择器 :last-child