CSS 定义 - 需要覆盖吗？

Question

本质上，我必须对不同屏幕尺寸的行的最后一列应用不同的边距（margin-right）。 flexbox 到目前为止效果很好。以下代码完成这项工作：

* 由于我们这里有三列，因此每第 3 行禁用右边距*

.div1:nth-child(3n) {  
    margin-right: 0%;
}

@include media-query($desktop) {

/*** As we have two columns here, undo no-margin for every 3rd row ***/

    .div1:nth-child(3n) {  
        margin: 0 5% 3.33% 0;
     }

/*** Instead, apply it to every second now ***/

    .div:nth-child(2n) {  
        margin-right: 0%;
     }

}

@include media-query($mobile) {

/*** As each column is 100% width now, only apply bottom-margin. ***/   

     .div1:nth-child(3n) {  
         margin: 0 0% 5% 0;
     }

     .div1:nth-child(2n) {  
         margin: 0 0% 5% 0;
     }

}

问题：我真的必须覆盖全局 .div1:nth-child(3n) 和 .div:nth-child (2n) 最后两个媒体查询的定义还是有更简单、更好的解决方案？

Answer 1

把你的

.div1:nth-child(3n) {  
  margin-right: 0%;
}

在桌面媒体查询中，移动设备不需要知道任何相关信息。

CSS 定义 - 需要覆盖吗？

CSS definitions - overwriting needed?

css

media-queries

responsiveness