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

chuyao 发布于2019-08-30 15:55 / 2796人阅读

摘要：我们需要达到的效果需要什么张图片的，张图片的，张图片的样式各不相同。

我们需要达到的效果：

需要什么

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部分

        
          
            
            {{item.name}}
          
          
            
          
          
            {{item.createTime}}
            
              
              {{item.fabulousNumber}}

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;
          }
        }
      }
    }

云服务器 GPU云服务器 js中元素加载完成不同元素子元素个数子元素节点

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117123.html

CSS代码重构与优化之路

摘要：代码重构的目的我们写代码时，不仅仅只是完成页面设计的效果，还应该让代码易于管理，维护。命名与备注命名是提高代码可读性的第一步，也是及其重要的一步。写CSS的同学们往往会体会到，随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对CSS代码进行维护，CSS代码不断会越来越多。CSS代码交错复杂，像一张庞大的蜘蛛网分布在网站的各个位置，你不知道修改这行代码会有什么影响，所以...

fou7 2019-08-29 12:27 评论0 收藏0
CSS代码重构与优化之路

摘要：代码重构的目的我们写代码时，不仅仅只是完成页面设计的效果，还应该让代码易于管理，维护。命名与备注命名是提高代码可读性的第一步，也是及其重要的一步。写CSS的同学们往往会体会到，随着项目规模的增加，项目中的CSS代码也会越来越多，如果没有及时对CSS代码进行维护，CSS代码不断会越来越多。CSS代码交错复杂，像一张庞大的蜘蛛网分布在网站的各个位置，你不知道修改这行代码会有什么影响，所以...

不知名网友 2019-08-01 16:42 评论0 收藏0
css选择器和jQuery选择器

摘要：通用选择器组合子和否定伪类对特异性没有影响。选择器大部分还是和选择器保持了一致，但是有以下一些部分的改动第一个元素最后一个元素所有偶数元素，索引值从开始，第一个元素是偶数，第二个元素是奇数，以此类推。选择器在书写样式和查找节点的时候，选择器是必不可少的，所以了解选择器的书写方式和使用就显得极为重要，本文主要分开讲了css选择器和jQuery选择器； css选择器大家都可能知道，在...

niuxiaowei111 2019-08-29 13:10 评论0 收藏0
Html知识点

摘要：和的区别表示只读，只能用于文本框，不能修改内容，它的值可以随表单提交给服务器表示该元素不可用，不响应事件，不能修改内容。同时不响应事件。通配选择器属性为的元素中，所有的子元素均采用该样式。表示按照格式规则正常定位。1、企业应用计算模式主要有：CS模式（客户端/服务器）和BS模式（浏览器/服务器模式） 2、html:超文本标记语言。以标记和子标记描述网页元素。　　http：超文本传输协议。 3...

番茄西红柿 2019-04-23 13:35 评论0 收藏0