html - 为什么颜色属性没有改变？

Question

媒体查询改变了一切，但没有改变颜色属性。我想知道为什么？它只有在我没有定义颜色属性并将其保留为默认值时才有效。为什么媒体查询不能改变颜色？

https://jsfiddle.net/6spv3mrf/

<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。现在你基本上是在覆盖你的 @media属性与您的正常 css。例如，如果您添加 body在你的里面 @media属性然后你的一般body css 也应该在 @media 之前定义属性。

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

Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question and the target medium matches the media list on all @media rules containing the declaration and on all links on the path through which the style sheet was reached.

您可以找到完整的文档 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;
}