为什么我的：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，要真正的灵活运用还是需要大量的实践。