用css完成根据子元素不同书写样式的方法

我们需要达到的效果:

需要什么

1张图片的, 2张图片的, 3张图片的样式各不相同。可以使用js完成子元素的判断,但是这里我使用css来完成

核心知识点

使用css选择器完成子元素的判断

例子:

用css选择器匹配只有一个元素

div {
    &:last-child:nth-child(1) {
      // 相关样式
    }
}

很好理解:div下面即是最后一个元素也是第一个元素不就是只有一个子元素吗?

用css选择器匹配只有两个子元素

div{
    &:nth-last-child(2):nth-child(2) {
    
    }
}

依样画瓢:最后第二个元素也是第二个元素不就代表,这个div下只有两个元素吗

完成样式

html部分

     <div class="box" v-for="(item,index) in list" :key="index">
          <div class="header">
            <img :src=http://www.cppcns.com/web/css/"item.userImage" alt="">
            {{item.name}}
          
%20%20%20%20%20%20%20%20%20%20
%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20{{item.createTime}} %20%20%20%20%20%20%20%20%20%20%20%20 %20%20%20%20%20%20%20%20%20%20%20%20%20%20 {{item.fabulousNumber}}