资讯

精准传达 • 有效沟通

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

网站建设 >

查看其它板块

使用css怎么根据子元素书写不同样式

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

10年积累的网站设计制作、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站策划后付款的网站建设流程，更有和政免费网站建设让你可以放心的选择与我们合作。

核心知识点

使用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/isjoco.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

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

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

业务热线：400-028-6601 / 大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
网站运维托管百度关键词排名商城系统开发益鑫餐饮混凝土搅拌车简阳电信机房成都网站维护成都模板网站成都网站设计网站设计

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

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

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