css媒体查询优先级不知道为什么低了导致失效

Question

css中使用媒体查询时，在css中书写的样式，媒体查询中无效。
代码复现：

.rightMain {
    font-size: 30px;
}
@media only screen and (max-width: 1200px){
    .rightMain{
    font-size: 300px;
    }
}

当屏幕小于1200px时， .rightMain不变化。

但测试一下情况：

@media only screen and (min-width: 1200px){
    .rightMain {
    font-size: 30px;
  }
}

@media only screen and (max-width: 1200px){
    .rightMain{
    font-size: 300px;
    }
}

以及

.rightMain {
    font-size: 30px;
}
@media only screen and (max-width: 1200px){
    .rightMain{
    font-size: 300px !important;
    }
}

则正常变化。

已确定媒体查询无误、媒体查询在css结尾处。
Vue3.0项目中，单vue页面中书写该页面的样式（使用scss预编译）。

Answer 1

控制台css属性显示横线，说明被某处样式覆盖了，权重优先级比当前高