CSS子选择first-child和nth-last-child再次立功，你还没用过？

最近隔壁美工小姐姐又给我找难题了，让实现以下功能，一张图居中，二张图平分，三张以上左浮动排列，据说是实现不了，所以让我切这个活动页面了。

CSS原理：

原理：first-child选择的是第一个元素， nth-last-child(n)选择的是从最后一个元素开始数的第n个元素，两者结合就碰撞出了以下结果

:first-child:nth-last-child(1) 选择只有一个元素的第一个元素 —— 即是第一个元素又是从最后一个元素开始数的第一个元素
:first-child:nth-last-child(2) 仅有2个元素的第一个元素     —— 即是第一个元素又是从最后一个元素开始数的第二个元素
:first-child:nth-last-child(3) 仅有3个元素的第一个元素     —— 即是第一个元素又是从最后一个元素开始数的第三个元素
......

就是这样，我们可以通过css像条件判断一样，自动识别匹配依据子元素的数量改变布局样式。

有人可能怀疑，你这样只能控制每种情况的第一个元素，那仅有2个元素的第二个元素的布局怎么办？兄弟选择器 ~ +这个时候还需要上阵，这样才能将不同情况下的所有元素样式统一。

源代码分享

1.html——我是在小程序里面实现的功能，html里面一样，CSS对应子元素就行

<block wx:for="{{rewardlist}}" wx:key="index">  
     <view class="prize-item">
       <image src="{{item.user_img}}"></image>
       <view class="text-22 cor99 text-center">{{item.rew_title}}</view>
     </view> 
</block> 

2.Css

/* 左浮动常规布局 */
.prize-item{width: 32%; float: left;overflow: hidden;margin-bottom: 15rpx;margin-right: 2%;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.prize-item image{width: 180rpx;height: 180rpx;}
.prize-item:nth-of-type(3n){margin-right: 0;}
/* 仅有一个元素布局 */
.prize-item:first-child:nth-last-child(1){width: 250rpx;margin-left:calc((100% - 250rpx)/2);}
.prize-item:first-child:nth-last-child(1) image{width: 250rpx;height: 250rpx;} 
/* 仅有2个元素布局 */
.prize-item:first-child:nth-last-child(2),.prize-item:first-child:nth-last-child(2) +view:nth-of-type(2){width: 49%;float:left;overflow: hidden;margin-right: 2%;}
.prize-item:first-child:nth-last-child(2) +view:nth-of-type(2){margin-right: 0;}
.prize-item:first-child:nth-last-child(2) image,.prize-item:first-child:nth-last-child(2) +view:nth-of-type(2) image{width: 260rpx;height: 260rpx;}

3.小程序js数据，纯静态页面测试的时候，直接复制几个子元素就行了，js数据可以省略。

 data: { 
    rewardlist:[
      {id:0,user_img:'/images/ava.jpg',rew_title:'20元课程抵用券'},
      {id:1,user_img:'/images/ava.jpg',rew_title:'2020初级会计实务官方教材'},
      {id:2,user_img:'/images/ava.jpg',rew_title:'2020初级会计实务官方教材'},
      {id:3,user_img:'/images/ava.jpg',rew_title:'80元全场抵用券'},
      {id:4,user_img:'/images/ava.jpg',rew_title:'100元全场抵用券'}
    ]
}

学会了这一招，是不是又可以吹牛逼了？我可以不用js写出9宫格不同排版样式！