CSS媒体查询，它不会将属性从1024更改为768

Question

我正在使用媒体查询，它应该在1024视图和768视图中更改颜色，但是768媒体查询继承了1024的属性。

@media only screen and (max-width: 768px) {

  .cashBalance  {
    font-size: 50px !important; 
    color: green !important;
    margin-left: -20px !important;
  } 
}

@media only screen and (max-width: 1024px) {
  .cashBalance  {
    font-size: 65px; 
    color: red !important;
  }
 }

我正在附上密码笔链接。 https://codepen.io/SahilKatia/pen/ejqjjJ

Answer 1

更改媒体查询的顺序，现在您说的是1024中的颜色是绿色，但是由于它大于768，因此忽略了其他属性