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

客官°小女子只卖身不卖艺 2022-04-10 05:08 177阅读 0赞

我们需要达到的效果：

![2018122716393261][]

### 需要什么 ###

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

### 核心知识点 ###

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

例子：

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

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

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

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

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

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

### 完成样式 ###

*  html部分

\`\`\` <div class="box" v-for="(item,index) in list" :key="index"> <div class="header"> <img :src="item.userImage" alt=""> <span>\{ \{item.name\}\}</span> </div> <div class="content"> <img :src="v" alt="" v-for="(v, i) in item.imageUrl" :key="i"> </div> <div class="bottom"> <span class="left-icon">\{ \{item.createTime\}\}</span> <div class="right"> <img src="./img/6.1.png" alt=""> <span>\{ \{item.fabulousNumber\}\}</span> </div> </div> </div> \`\`\`

*  css部分

.box {
          padding: 0.26rem;
    
          .header {
            display: flex;
            align-items: center;
    
            img {
              width: 0.58rem;
              height: 0.58rem;
              margin-right: 0.17rem;
            }
          }
    
          .bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #999999;
            font-size: 0.17rem;
    
            img {
              width: 0.17rem;
              height: 0.17rem;
            }
          }
    
          .content {
            display: flex;
            margin: 0.17rem 0;
    
            img {
              flex: 1;
              height: 1.37rem;
              width: 0;
              margin-right: 0.09rem;
              &:last-child {
                margin-right: 0;
              }
              &:last-child:nth-child(1) {
                height: 2.75rem;
              }
            }
          }
        }

来源：[https://segmentfault.com/a/1190000017524238][https_segmentfault.com_a_1190000017524238]

[2018122716393261]: /images/20220402/ebbd133c760440b48db387160a4a400b.png
[https_segmentfault.com_a_1190000017524238]: https://segmentfault.com/a/1190000017524238