给for循环元素设置不同的样式

如何给循环元素加边框呢？？

可以选择使用标签选择器来实现=====》

1、first-child
first-child表示选择列表中的第一个标签。例如：li:first-child{background:#fff}
2、last-child
last-child表示选择列表中的最后一个标签，例如：li:last-child{background:#fff}
3、nth-child(3)
表示选择列表中的第3个标签，例如：li:nth-child(3){background:#fff}，代码中的3也可以改成其它数字，如4、5等。想选择第几个标签，就填写几。
4、nth-child(2n)
这个表示选择列表中的偶数标签，即选择 第2、第4、第6…… 标签，例如：li:nth-child(2n){background:#fff}
5、nth-child(2n-1)
这个表示选择列表中的奇数标签，即选择 第1、第3、第5、第7……标签，例如：li:nth-child(2n-1){background:#fff}
6、nth-child(n+3)
这个表示选择列表中的标签从第3个开始到最后。
7、nth-child(-n+3)
这个表示选择列表中的标签从0到3，即小于3的标签。
8、nth-last-child(3)
这个表示选择列表中的倒数第3个标签。

 

.cardItem {
    width: 279px;
    height: 150px;
    background-color: rgba(242,242,242,0.6);
    padding-top: 20px;
    padding-left: 20px;
    border-right: 1px solid #dedddd;
    border-bottom: 1px solid #dedddd;
    //去掉右边框
    &:nth-child(4n){
        border-right: none; 
    }
    &:last-child{
        border-right: none; 
    }
    // &:last-of-type .cardList{
    //     border-bottom: none;
    // }
     //去掉下边框
    &:nth-last-child(-n+4){
        border-bottom: none; 
    }
    
  }
//   .cardItem:nth-child(3n+1):nth-last-child(-n+3) ~ .cardItem{
//         border-bottom: none;
//     }

如上仅供参考 ❤