我们需要达到的效果:
需要什么
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="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; } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
css,子元素,写样式
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com
暂无“用css完成根据子元素不同书写样式的方法”评论...
更新日志
2024年11月15日
2024年11月15日
- 第五街的士高《印度激情版》3CD [WAV+CUE][2.4G]
- 三国志8重制版哪个武将智力高 三国志8重制版智力武将排行一览
- 三国志8重制版哪个武将好 三国志8重制版武将排行一览
- 三国志8重制版武将图像怎么保存 三国志8重制版武将图像设置方法
- 何方.1990-我不是那种人【林杰唱片】【WAV+CUE】
- 张惠妹.1999-妹力新世纪2CD【丰华】【WAV+CUE】
- 邓丽欣.2006-FANTASY【金牌大风】【WAV+CUE】
- 饭制《黑神话》蜘蛛四妹手办
- 《燕云十六声》回应跑路:年内公测版本完成95%
- 网友发现国内版《双城之战》第二季有删减:亲亲环节没了!
- 邓丽君2024-《漫步人生路》头版限量编号MQA-UHQCD[WAV+CUE]
- SergeProkofievplaysProkofiev[Dutton][FLAC+CUE]
- 永恒英文金曲精选4《TheBestOfEverlastingFavouritesVol.4》[WAV+CUE]
- 群星《国风超有戏 第9期》[320K/MP3][13.63MB]
- 群星《国风超有戏 第9期》[FLAC/分轨][72.56MB]