Html 为什么颜色属性不是'；不改变吗？

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

@仅介质屏幕和（最大宽度：900px）{
h1{
颜色：红色；
/*不起作用*/
背景颜色：黄色；
/*工作*/
}
}
身体{
背景颜色：黄绿色；
字体系列：无衬线；
}
#盒子{
宽度：50%；
位置：固定；
排名：0；
右：0；
底部：0；
背景色：#fff；
z指数：1；
}
#正文{
最小高度：80%；
利润率：25%10%；
填充：10px；
}
h1{
字体大小：粗体；
字号：2em；
保证金：0；
颜色：#000；
文本对齐：左对齐；
}

将媒体查询移动到css的末尾

---

将媒体查询移动到css的末尾

---

您需要在

h1

css之后移动

@media

css。现在，您基本上是在用普通css覆盖您的

@media

属性。如果在

@media

属性中添加例如

body

，则在

@media

属性之前还应定义常规

body

css

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

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

您可以找到完整的文档

---

您需要在

h1

css之后移动

@media

css。现在，您基本上是在用普通css覆盖您的

@media

属性。如果在

@media

属性中添加例如

body

，则在

@media

属性之前还应定义常规

body

css

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

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

您可以找到完整的文档

---

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

以下是您的小提琴中的（编辑过的）代码，顺便说一句，您也可以将其放入此处的代码片段中，以便：

正文{
背景颜色：黄绿色；
字体系列：无衬线；
}
#盒子{
宽度：50%；
位置：固定；
排名：0；
右：0；
底部：0；
背景色：#fff；
z指数：1；
}
#正文{
最小高度：80%；
利润率：25%10%；
填充：10px；
}
h1{
字体大小：粗体；
字号：2em；
保证金：0；
颜色：#000；
文本对齐：左对齐；
}
@仅介质屏幕和（最大宽度：900px）{
h1{
颜色：红色；
/*不起作用*/
背景颜色：黄色；
/*工作*/
}
}

随机
文本

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

以下是您的小提琴中的（编辑过的）代码，顺便说一句，您也可以将其放入此处的代码片段中，以便：

正文{
背景颜色：黄绿色；
字体系列：无衬线；
}
#盒子{
宽度：50%；
位置：固定；
排名：0；
右：0；
底部：0；
背景色：#fff；
z指数：1；
}
#正文{
最小高度：80%；
利润率：25%10%；
填充：10px；
}
h1{
字体大小：粗体；
字号：2em；
保证金：0；
颜色：#000；
文本对齐：左对齐；
}
@仅介质屏幕和（最大宽度：900px）{
h1{
颜色：红色；
/*不起作用*/
背景颜色：黄色；
/*工作*/
}
}

随机
文本

指定问题，将媒体查询放在末尾<代码>颜色：#000总是Temani上面所说的例子-@TemaniAfif实际上不是一个特定性问题（两个选择器都只是

h1

），但如果特定性相等，则后面的属性将覆盖前面的属性。请在堆栈溢出中包括问题中的所有相关代码，而不仅仅是在第三方站点上。请参阅。@Johannes是的，确定我们是否应该使用正确的词语，但我只是添加了一个快速注释来显示问题：）指定性问题，将媒体查询放在末尾<代码>颜色：#000总是Temani上面所说的例子-@TemaniAfif实际上不是一个特定性问题（两个选择器都只是

h1

），但如果特定性相等，则后面的属性将覆盖前面的属性。请在堆栈溢出中包括问题中的所有相关代码，而不仅仅是在第三方站点上。请参阅。@Johannes是的，我确定我们是否应该使用正确的词语，但我只是添加了一条快速注释来说明问题：）

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

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*/
  }
}

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