:last-child 与: last-of-type 的区别

在设计列表的时候,会发现最后一个子元素与其他元素在样式上经常会有差异。
这种情况下,我们常常会使用:last-child和:last-of-type两种伪类来实现目的,那么这两种有何区别呢?

:last-child选择器用来匹配父元素中最后一个子元素
注意,该伪类前的标签是指子元素,而不是父元素,例如p:last-child是指作为最后一个子元素存在的p标签,而不是p标签中的最后一个子元素。
在这里插入图片描述在这里插入图片描述
:last-of-type选择器匹配位于同一父元素下特定类型中的最后一个子元素
p:last-of-type表示处于同一层子元素中的所有p标签里面的最后一个p。也就是说首先这些p标签是同一个父元素,然后再匹配这些p标签中的最后一个,该标签可能不是父元素的最后一个子元素。
在这里插入图片描述在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值