:nth-child(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();
}

• 通过:nth-child(n)确定当前元素, 再设置css样式来更换皇冠背景图(排名)