为什么我的:last-child选不中?

今天做的页面有这么一个需求:要求父div里面的子div之间用横线分隔开来。

解决方法:利用伪类:after给每个div添加下划线,然后利用:last-child选中最后一个子div,将其:after修改。但是很奇怪,老是选不中最后一个子div。

具体情况如下:

你以为会选中最后一个.child

O

将其字体颜色置为red,但实际上页面上是这样:

感觉好像代码没错,.child:last-child,选中最后一个.child,设置字体为红色,但为什么没有选中呢?

这个问题真的比较坑爹,但是认真去了解:last-child的含义,也就明白了。

所谓:last-child其实是相对其父元素而言的,是选择父元素的最后一个孩子。

而在上例中,.child的父元素的最后一个孩子是p标签,而不是.child,就不符合.child:last-child这个选择器,所以就没有选中。

改成这样就可以了:

感受:在你去看css文档的时候,好像觉得一切规则都挺简单的,已经理解了他的用法,但我们只是知道了这个规则,真正开发的时候,不可避免的会遇见一些让人不解的bug,要真正的灵活运用还是需要大量的实践。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180720G150G400?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券