新浪博客

CSS3中last-child样式如何使用？

2018-10-05 21:54阅读：

http://blog.sina.cn/dpool/blog/u/5922381376

last-child 选择器用来匹配父元素中最后一个子元素。意思就是指定倒数第一个（最后一个）对象设置CSS样式。请看以下代码举例：

CSS3中last-child样式如何使用？
上面代码中创建了一个 ul 列表，列表里设置了三个 li 标签。
在CSS中，为 ul 规定了总宽度是1002像素，其中每个li标签的宽度是314像素，那么三个li标签就是942像素。
然后每个 li 标签都有一个右边30像素的外边距，三个 li 标签一共是90像素。这个时候 li 标签加上三个边距的总宽等于1032像素。很显然超过了父元素 ul 的总宽。这样三个 li 就没法在一排显示了，第三个会掉到下一行显示。效果如下：


CSS3中last-child样式如何使用？


那如果我们不改变ul宽度的情况下，要让这三个li并排显示该怎么做呢？
这个时候 last-child 选择器就能发挥到作用了，只需用它指定最后一个 li 的边距样式为：0 即可。 代码书写如下：
ul li:last-child {margin-right:0}


然后再来预览下方效果图：
CSS3中last-child样式如何使用？


这样是不方便多了。
可能有人会问，如果最后一个不是 li 标签，是 div 或者是 p 怎么办呢？
其实方法是一样的，只需要先写出父元素的标签名称，然后再子元素:last-child（写样式即可）。例如控制最后一个 p 标签的样式，举例如下：
p:last-child {padding-left:0}
p:last-child {background::none}
p:last-child {color:red}
p:last-child {width:143px}


通过上面的举例，last-child你会用了吗？

我的更多文章

下载客户端阅读体验更佳

APP专享