html - scss - 类中的@media 查询不适用于子选择

Question

所以我想针对某个类的 child 在屏幕宽度满足一定宽度时有不同的属性。但是，@media 查询对 child 不起作用，除非我应用了 !important。这是我遗漏的某种特殊性问题吗？

HTML:

<div class=test>
  <div class="a">
    test block1
  </div>
  <div class="b">
    test block2
  </div>
</div>

SCSS:

.test {
  display: flex;

  @media only screen and (max-width: 500px) {
    display: block;

    div + div {
      margin: 0;
    }     

  }
  div + div {
    margin-left: 5px;
  }

  > div {
    width: 50px;
  }
}

.a {
  background-color: red;
}

.b {
  background-color: blue
}

https://jsfiddle.net/g3641apf/

Answer 1

看看这个fiddle .你需要改变媒体查询的位置

.test {
  display: flex;


  div + div {
    margin-left: 5px;
  }

  > div {
    width: 50px;
  }


 @media only screen and (max-width: 500px) {
    display: block;

    div + div {
      margin: 0;
    }     

  }
}

.a {
  background-color: red;
}

.b {
  background-color: blue
}