SCSS中多组媒体查询仅第一组生效的问题求助

问题根源 #

你后面两组媒体查询的选择器权重不够，被第一组的样式覆盖了：

• 第一组里的.profile-info是嵌套在.profile-banner下的，选择器为.profile-banner .profile-info，权重高于单独的.profile-info
• 即使屏幕宽度符合550px/450px的条件，后面两组的padding-top也会被第一组的padding-top:3rem覆盖

解决方案 #

方案一：统一选择器嵌套结构（推荐）

将后面两组的.profile-info也嵌套在.profile-banner下，保证选择器权重一致，小范围媒体查询的样式会自动覆盖大范围的：

@media only screen and (max-width: 700px) {
  .profile-banner {
    transform: translateY(0rem) !important;
    .img-div {
      margin-right: 1rem !important;
    }
    .profile-info {
      padding-top: 3rem;
      p {
        font-size: 12px !important;
      }
      h1 {
        font-size: 2.5rem !important;
      }
    }
  }
}
@media only screen and (max-width: 550px) {
  .profile-banner {
    .profile-info {
      padding-top: 2rem;
    }
  }
}

@media only screen and (max-width: 450px) {
  .profile-banner {
    .profile-info {
      padding-top: 1rem;
    }
  }
}

方案二：临时提高样式优先级（不推荐）

如果不想调整嵌套结构，可以给后面的选择器加上父元素或使用!important强制生效：

@media only screen and (max-width: 550px) {
  .profile-banner .profile-info {
    padding-top: 2rem !important;
  }
}

@media only screen and (max-width: 450px) {
  .profile-banner .profile-info {
    padding-top: 1rem !important;
  }
}

额外提示 #

• 媒体查询需按从大宽度到小宽度的顺序编写，你当前的顺序是正确的
• 浏览器调试器中看到样式被划掉时，可查看右侧的覆盖来源，确认权重问题

内容的提问来源于stack exchange，提问作者devZ