资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

使用css怎么根据子元素书写不同样式-创新互联

这篇文章将为大家详细讲解有关使用css怎么根据子元素书写不同样式，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联成都企业网站建设服务，提供网站建设、网站设计网站开发,网站定制,建网站,网站搭建,网站设计,自适应网站建设,网页设计师打造企业风格网站,提供周到的售前咨询和贴心的售后服务。欢迎咨询做网站需要多少钱:18982081108

核心知识点


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

什么是css

css是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种定义样式结构如字体、颜色、位置等的语言，并且css样式可以直接存储于HTML网页或者单独的样式单文件中，而样式规则的优先级由css根据这个层次结构决定，从而实现级联效果，发展至今，css不仅能装饰网页，也可以配合各种脚本对于网页进行格式化。

关于使用css怎么根据子元素书写不同样式就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。


网页标题：使用css怎么根据子元素书写不同样式-创新互联
网站路径：http://cdkjz.cn/article/iodpi.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都雪糕加盟seo网络营销推广成都高电机柜租用网站建设报价方案LED网站设计方案服务器托管四川白乌鱼力比特机械成都网站建设公司LED显示屏

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图