zoukankan      html  css  js  c++  java
  • CSS判断子元素的数量来动态设置子元素的样式,css判断子元素有多少个

    先看看最终实现样式

    1个item 宽度占100%

    2个item  宽度各占50%

     

     三个item  宽度各占33.3%

    四个item  就会换行 然后两个占50%

     

    之后item再多 每个也只占33.3%   

    最开始实现上述样式,我采用的是el-col来包裹每个item  然后控制他们的span 达到换行与行显示多少个的效果,但是后面发现,用flex布局也能实现,再用css分别设置只有一个item 两个item  4个item时的宽度

    代码如下

    &:last-child:first-child {
        //item 即是最后一个元素 又是第一个元素
        width: 100%;
      }
    
      &:nth-last-child(2):first-child ~ &:nth-last-child(1) {
        //item即是倒数第二个元素 又是第一个元素 之后的倒数第一个元素(也是第二个)
        width: 50%;
      }
    
      &:nth-last-child(2):first-child {
        //item即是倒数第二个元素 又是第一个元素 就是2个元素中第一个 设置它的宽度默认为50%
        width: 50%;
      }
    
      &:nth-last-child(4):first-child ~ &:nth-last-child(1) {
        //item即是倒数第二个元素 又是第一个元素 然后它之后的倒数第一个元素
        //就是4个元素中倒数第一个元素 设置它的宽度默认为50%
        width: 50%;
      }
    
      &:nth-last-child(4):first-child ~ &:nth-last-child(2) {
        width: 50%;
      }
    
      &:nth-last-child(4):first-child ~ &:nth-last-child(3) {
        width: 50%;
      }
    
      &:nth-last-child(4):first-child {
        width: 50%;
      }

    用伪类选择器,判断元素即是第一个,又是最后一个,说明之后一个元素,

    即是倒数第四个,又是第一个 说明有4个元素,在用~符号 选取它之后的倒数第一个,元素 这样来写,

  • 相关阅读:
    作业
    Day2
    Day1
    让Antd 的Modal 可以拖动
    JS日期处理——月末、季度末
    前端常见问题收录
    前端面试题收录
    使用ES6 Set类型 数组去重
    小程序开发:用Taro搭建框架
    JS 树形结构与数组结构相互转换、在树形结构中查找对象
  • 原文地址:https://www.cnblogs.com/lonelyshy/p/13917871.html
Copyright © 2011-2022 走看看