今天做的页面有这么一个需求:要求父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,要真正的灵活运用还是需要大量的实践。
领取专属 10元无门槛券
私享最新 技术干货