我已经尝试让这个@media 代码工作 30 分钟，但我仍然找不到答案 [重复]答案

【问题标题】：I've been trying to make this @media code work for 30 minutes already but I still can't find an answer [duplicate]我已经尝试让这个@media 代码工作 30 分钟，但我仍然找不到答案 [重复]
【发布时间】：2018-06-21 19:20:22
【问题描述】：

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;
  }
}

&lt;div class="klase"&gt;&lt;/div&gt;

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

【问题讨论】：

div.klase 比 .klase 更具体，因此您的媒体块将不起作用。您还需要删除; 之后的500px
离开@Turnip 的评论，在大多数情况下不需要在“div.klase”之类的类之前指定一个元素。

标签： html css

【解决方案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;
  }
}

【讨论】：

【解决方案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;
  }
}

&lt;div class="klase"&gt;&lt;/div&gt;

【讨论】：