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

我们需要达到的效果：

需要什么

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

核心知识点

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

例子：

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

1. div {
2. &:last-child:nth-child(1) {
3. // 相关样式
4. }
5. }

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

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

1. div{
2. &:nth-last-child(2):nth-child(2) {
3.  
4. }
5. }

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

完成样式

html部分

1. <div class="box" v-for="(item,index) in list" :key="index">
2. <div class="header">
3. <img :src="item.userImage" alt="">
4. <span>{{item.name}}</span>
5. </div>
6. <div class="content">
7. <img :src="v" alt="" v-for="(v, i) in item.imageUrl" :key="i">
8. </div>
9. <div class="bottom">
10. <span class="left-icon">{{item.createTime}}</span>
11. <div class="right">
12. <img src="./img/6.1.png" alt="">
13. <span>{{item.fabulousNumber}}</span>
14. </div>
15. </div>
16. </div>

css部分

1. .box {
2. padding: 0.26rem;
3.  
4. .header {
5. display: flex;
6. align-items: center;
7.  
8. img {
9. width: 0.58rem;
10. height: 0.58rem;
11. margin-right: 0.17rem;
12. }
13. }
14.  
15. .bottom {
16. display: flex;
17. justify-content: space-between;
18. align-items: center;
19. color: #999999;
20. font-size: 0.17rem;
21.  
22. img {
23. width: 0.17rem;
24. height: 0.17rem;
25. }
26. }
27.  
28. .content {
29. display: flex;
30. margin: 0.17rem 0;
31.  
32. img {
33. flex: 1;
34. height: 1.37rem;
35. width: 0;
36. margin-right: 0.09rem;
37. &:last-child {
38. margin-right: 0;
39. }
40. &:last-child:nth-child(1) {
41. height: 2.75rem;
42. }
43. }
44. }
45. }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。