我已经尝试使此@media代码工作30分钟了，但是我仍然找不到答案

Question

div.klase {
  background-color: aqua;
  height: 200px;
  width: 300px;
  border: 1px solid red;
  box-sizing: border-box;
}

@media screen and (max-width:500px;
) {
  .klase {
    background-color: pink;
  }
}

<div class="klase"></div>

首先，很抱歉，如果这个问题很愚蠢，当它小于500px时，我正在尝试将其.klase颜色更改为粉红色。但是，尽管它几乎与媒体查询的其他示例相似，但它似乎并没有以这种方式工作。感谢您的帮助，谢谢。

Answer 1

它具有特异性。尝试这种方式

div.klase {
  background-color: aqua;
  height: 200px;
  width: 300px;
  border: 1px solid red;
  box-sizing: border-box;
}

@media screen and (max-width:500px) {
  div.klase {
    background-color: pink;
  }
}

Answer 2

检查

.klase {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  box-sizing: border-box;
  background-color:aqua;
}

@media (max-width: 500px) {
  .klase {
    background-color:pink;
  }
}

<div class="klase"></div>