之前一直纠结一个问题：腾讯qq和微信发布图片的时候，1个图片时大图，2个图片并列排，3个图片单行并列并缩写...9个图片9宫格，这不用js肯定实现不了！
但是，但是，但是，我遇到这两个css选择器之后，刷新了我的看法，用css就能实现1到9张图不同张数排版不一样的问题。对就是first-child和nth-last-child 配合使用，一起走进这2个选择器吧！
1.first-child 第一个元素
当前选择元素第一个元素，例如：.box p:first-child 就是box下面的第一个p元素，注意这里如果你的第一个元素不是p，是其他元素，那么不好意思 first-child 罢工了。就是这么任性。
生效必备条件，选择元素和位置都必须一致，就是说，选择的元素必须是盒子下面的第一个元素。
2.nth-last-child 第一个元素从最后一个开始数，其父级下的第n个元素
这个选择器很有意思：从最后一个元素开始数，很少遇到这样的事情，它用起来很好用，就是判断父元素一共有多少个子元素。
例如：.box p:nth-last-child(3){background: red;}
这句话表示，box里面的p元素如果刚好有3个，那么选中第一个并添加样式——它的第一个子元素不就是从最后一个子元素数起的最后一个元素吗？刚好就是第一个。
假如box里面有5个p，那么p:nth-last-child(3)选中的就是倒着数第三个元素，并添加样式
看到这，是不是对开头我们说的话题有种一目了然，假如我们把first-child和nth-last-child结合起来，分别写9种样式对应9种图片排列方式，不就可以了。
3.first-child,nth-last-child一起用
例如：.box p:first-child:nth-last-child(4){background: green;}
这句话表示，box里面的p元素如果刚好有4个，那么选中box仅有4个子元素p的情况下的第一个p元素。
但是，但是，但是，如果盒子里面只有2个p或者5个p，不是我们指定的4个，那么不好意思，p:first-child:nth-last-child(4) 不识别不生效。是不是找到感觉了，那么大家可以把其余的情况都列一下，比较简单。
4.~ / + 兄弟选择器 ，+ 仅选择相邻的一个，~ 会选择相邻的所有的
在第3的时候，我们就能选择 不同数量的第一个元素了，那么第2，3,4..元素怎么选择？当然使用兄弟选择器最方便了。
例如：.box3 p:first-child:nth-last-child(4) + p{background: yellow;}
有的朋友看到这估计看不下去了，“我擦，这啥东西，这么长，谁知道啥意思”，不要急，它只是在案例3的基础上增加了兄弟选择器 + ；
它的意思就是，box仅有4个元素的时候，选择第一个p元素的下一个兄弟元素p，那就是第二个p元素了，这样翻译过来是不是就明白了。
例如：.box3 p:first-child:nth-last-child(4) ~ p{background: yellow;}
再看看这个 + 号 换 ~ 号，意思就全变了。
它的意思说，box仅有4个元素的时候，选择第一个p元素的下面全部的兄弟元素p，对，它适配了所有的第一个除外的所有p
到这里，大家就会写1~9种排列的不同样式了吧，可以尝试一下不用js写这样复杂的布局，对自己绝对是一次提升！我就不公布答案了，避免小朋友直接复制粘贴坏习惯，就是不宠你。
