# last-child 与 last-of-type > 同学们遇到过给同一组元素的最后一个元素设置css失效的情况吗?我遇到过,当时使用:last-child居然不起作用,看到名字不科学啊,明明是“最后一个元素”,那为什么设置CSS失效呢?今天来一探究竟吧 * 先看一组`:last-child`正常工作的代码 ``` :last-child、:last-of-type ``` ![效果1](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-091957@2x.png) * 再先看一组`:last-child`不正常工作的代码 ``` :last-child、:last-of-type ``` ![效果2](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092046@2x.png) 问题抛出来了,那么来研究下:last-child和:last-of-type究竟是何方神圣。 1. :last-child:**The last-child CSS pseudo-class represents the last element among a group of sibling elements.(:last-child这个css伪类代表的一组兄弟元素当中最后一个元素)但经过代码发现,它说的一组元素应该是指其父元素的所有子元素且类型为:last-child前面指定的类型的一组元素。** 2. :last-of-type:**The last-of-type CSS pseudo-class represents the last element of its type among a group of sibling elements.(**:last-of-type这个css伪类代表其类型的一组兄弟元素中的最后一个元素**)所以它指的是和**:last-of-type前面的元素类型一致的一组元素的最后一个元素 同理::nth-last-child和:nth-last-of-type的区别在于父元素的子元素中且与:nth-last-child前面的元素类型一致的最后一个元素 做个验证 * :nth-last-child可以正常工作的代码 ``` :last-child、:last-of-type ``` ![效果3](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092145@2x.png) * :nth-last-child不能正常工作的代码 ``` :last-child、:last-of-type ``` ![](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092232@2x.png) * 接下来:nth-last-of-type闪亮登场 ``` :last-child、:last-of-type ``` ![](https://raw.githubusercontent.com/FantasticLBP/knowledge-kit/master/assets/WX20180507-092358@2x.png)