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個元素，在用~符號 選取它之后的倒數第一個，元素 這樣來寫，