Question

媒体查询正在更改所有内容，但不会更改颜色属性。我想知道为什么？只有在我没有定义颜色属性并将其保留为默认值时，它才有效。为什么媒体查询无法改变颜色？

<style>
@media only screen and (max-width: 900px) {
  h1 {
    color: red;
    /*doesn't work*/
    background-color: yellow;
    /*works*/
  }

}

body {
  background-color: yellowgreen;
  font-family: sans-serif;
}

#box {
  width: 50%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1;
}

#text {
  min-height: 80%;
  margin: 25% 10%;
  padding: 10px;
}

h1 {
  font-weight: bold;
  font-size: 2em;
  margin: 0;
  color: #000;
  text-align: left;
}

</style>

Answer 1

您需要在@media css 之后移动h1 css 。现在你基本上用普通的css覆盖你的@media属性。如果您在body属性中添加例如@media，则还应在body属性之前定义常规@media css。

您可以在官方文档中找到更多信息：

查找适用于目标媒体类型的相关元素和属性的所有声明。如果关联的选择器与相关元素匹配且目标媒体与包含声明的所有@media规则上的媒体列表以及到达样式表的路径上的所有链接匹配，则声明适用。

您可以找到完整的文档on the link。

h1 { font-weight: bold; font-size: 2em; margin: 0; color: #000; text-align: left; } @media only screen and (max-width: 900px) { h1 { color: red; /*doesn't work*/ background-color: yellow; /*works*/ } } body { background-color: yellowgreen; font-family: sans-serif; } #box { width: 50%; position: fixed; top: 0; right: 0; bottom: 0; background-color: #fff; z-index: 1; } #text { min-height: 80%; margin: 25% 10%; padding: 10px; }

Answer 2

将媒体查询移至css的末尾 more info on why it works

body {
  background-color: yellowgreen;
  font-family: sans-serif;
}

#box {
  width: 50%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1;
}

#text {
  min-height: 80%;
  margin: 25% 10%;
  padding: 10px;
}

h1 {
  font-weight: bold;
  font-size: 2em;
  margin: 0;
  color: #000;
  text-align: left;
}

@media only screen and (max-width: 900px) {
  h1 {
    color: red;
    /*doesn't work*/
    background-color: yellow;
    /*works*/
  }
}

Answer 3

正如我们在评论中已经写过的那样：媒体查询必须遵循一般规则，否则它会被一般规则中的属性覆盖（适用于所有内容，所以这是一个有序的问题）：

这是来自你小提琴的（编辑过的）代码，顺便说一下，你可以把它放在SO上的代码片段中：

body {
  background-color: yellowgreen;
  font-family: sans-serif;
}

#box {
  width: 50%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  z-index: 1;
}

#text {
  min-height: 80%;
  margin: 25% 10%;
  padding: 10px;
}

h1 {
  font-weight: bold;
  font-size: 2em;
  margin: 0;
  color: #000;
  text-align: left;
}

@media only screen and (max-width: 900px) {
  h1 {
    color: red;
    /*doesn't work*/
    background-color: yellow;
    /*works*/
  }
}

<div id="box">
  <div id="text">
    <h1>
      Random<br> Text
    </h1>

  </div>
</div>

为什么颜色属性不会改变？

3 个答案: