:nth-child(n)使用记录排行榜前三名头像皇冠展示

需求: 

实现排行榜前三名用户头部皇冠展示  

问题:

:nth-child(n)用法不熟悉导致开始出现头像上的皇冠图都是一样的 

:nth-child(n)选择父元素的第N个指定类型的子元素(类型: 数字/关键词/公式)

代码:

html部分

<view class="user_avatar_box" style="margin-top: -50rpx;margin-left: -20rpx; width: 80rpx; height: 136rpx;position: absolute;">
	<view class="rank_box" style="height: 56rpx;background-size: 100% 100%;"></view>
	<view class="user_avatar">
		<image :src="item.avatar" mode=""></image>
	</view>
</view>

css部分

.game_content .person_info:nth-child(1) .person_detail .user_avatar_box .rank_box{
	background-image: url();
}

.game_content .person_info:nth-child(2) .person_detail .user_avatar_box .rank_box{
	background-image: url();
}

.game_content .person_info:nth-child(3) .person_detail  .user_avatar_box .rank_box{
	background-image: url();
}