能否从低宽度媒体查询向高宽度媒体查询继承CSS属性？

当然可以实现！而且这其实是CSS媒体查询的默认特性哦——只要你遵循「从小到大」的媒体查询编写顺序，宽屏的媒体查询就会自动继承窄屏中已经定义的属性，除非你在宽屏的规则里特意覆盖它。

核心原理 #

CSS的规则逻辑是「后定义的同优先级规则会覆盖先定义的」，而媒体查询只是在特定视口条件下激活对应的规则。所以如果我们先写最小视口的基础样式，再依次编写更大视口的媒体查询，大视口的规则就会自动继承小视口里没被覆盖的属性（比如你提到的margin-right:36px），完全不需要重复编写。

具体代码实现 #

下面是完全匹配你需求的代码示例，我会同步解释关键细节：

/* 基础样式：默认适配<500px的窄屏 */
.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper > div {
  width: 100%;
  margin-bottom: 36px; /* 底部间距所有视口通用，后续会自动继承 */
}

/* 视口500px-768px：每行显示2个元素 */
@media (min-width: 500px) and (max-width: 768px) {
  .wrapper > div {
    width: calc(50% - 18px); /* 两个元素的margin-right总和是36px，每个元素需减去18px避免溢出 */
    margin-right: 36px; /* 这里定义的margin-right会被更宽的视口继承 */
  }
  /* 去掉每行最后一个元素的margin-right，防止容器横向溢出 */
  .wrapper > div:nth-child(2n) {
    margin-right: 0;
  }
}

/* 视口≥1025px：每行显示3个元素 */
@media (min-width: 1025px) {
  .wrapper > div {
    width: calc(33.333% - 24px); /* 三个元素的总margin-right是72px，每个元素减去24px */
    /* 这里不需要重复写margin-right:36px！已经从500px的媒体查询中自动继承了 */
  }
  /* 去掉每行最后一个元素的margin-right */
  .wrapper > div:nth-child(3n) {
    margin-right: 0;
  }
}

关键细节说明 #

1. 继承生效的逻辑：我们按「窄屏→中屏→宽屏」的顺序编写规则，当视口≥1025px时，前两个媒体查询里的未被覆盖的属性（比如margin-right:36px）会自动生效，无需重复定义。
2. 宽度计算技巧：因为子元素带有margin-right，所以用calc()计算实际宽度，确保元素总宽度（含margin）刚好填满容器，不会出现横向滚动条。
3. 最后一个元素的间距处理：用:nth-child()选择器精准去掉每行最后一个元素的margin-right，保证布局的整洁性。

额外优化建议 #

如果你觉得calc()和:nth-child()的写法有点繁琐，其实可以考虑用Flexbox的gap属性替代margin——它会自动处理元素间的间距，不需要手动清除最后一个元素的margin，代码会更简洁。不过既然你明确要求用margin实现，上面的代码完全满足你的需求。

内容的提问来源于stack exchange，提问作者webta.st.ic