为媒体查询CSS中的每个第二个元素设置保证金，并为每三分之一提供先前设置的保证金

Question

需要为媒体查询中的每隔一个元素设置一个余量，以前每隔三分之一就有一个余量。

.title:nth-child(3n+3) {margin-right:0 !important}

@media screen and (max-width:1160px) and (min-width:900px){
.title:nth-child(2n+2) {margin-right:0 !important}
}

由于某些原因，css的底部不会覆盖顶部。它为第二个元素设置了保证金，但保留了先前在css中设置的第三个保证金的保证金设置。

Answer 1

您需要重置every 3rd element规则，将其包装在自己的媒体查询中或覆盖它：

.title:nth-child(3n+3) {margin-right:0}

@media screen and (max-width:1160px) and (min-width:900px){
  .title:nth-child(3n+3) {margin-right: 20px;}
  .title:nth-child(2n+2) {margin-right:0 }
}

jsFiddle： https://jsfiddle.net/9woaL5ho/

演示：

将20px替换为原始值，因为使用inherit会将其设为0.请避免使用!important。