之前一直纠结一个问题:腾讯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写这样复杂的布局,对自己绝对是一次提升!我就不公布答案了,避免小朋友直接复制粘贴坏习惯,就是不宠你。