Question

因此，当屏幕宽度达到一定宽度时，我尝试将某个类的子项定位为具有不同的属性。但是，除非我已应用@media，否则!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
}

Answer 2

这是解决方案。

1.move cursor at the 7th line.
2.6dd
3.add many spaces at the end of each line
    %s/$/                         /
4.gg 
5.move cursor at the middle of the first line
6.ctrl+v
7.6g and down-side arrow
8.I
9.paste content in 0 regitor.
    ctrl+r+0

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

}

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

2 个答案: