Css 为什么我必须将媒体查询放在样式表的底部？

我刚开始学习响应式设计。在我的旅程中，我注意到，当我将媒体查询放在样式表的底部时，在断点方面，一切工作都完美无缺。如果我把媒体查询放在样式表的顶部，什么都不起作用，直到最近我才发现我需要添加

！重要信息

和

最大设备宽度

（与

最大宽度

）到正在更改的css

为什么会这样？为什么将媒体查询放在样式表的底部时可以在桌面和移动设备上工作

---

为什么当我把媒体查询放在样式表的顶部时，我需要添加

！重要信息

以及

最大设备宽度

，以便断点在桌面和移动设备上工作？

CSS从上到下读取。 任何低于其他css的内容都将覆盖其上的内容。 但是，可以使用

！重要信息

在CSS参数的末尾，使其覆盖所有其他内容

body{
    background-color: black !important;
}

body{
    background-color: pink;
}

背景色将为黑色。

---

如果你删除了！重要的是，它将是粉红色的。

因为css是从上到下读取的。最后设置的规则是将要执行的规则

翻译，是这样的：

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}

当您添加

时！重要信息

类似于说：

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}

---

基本上，当您希望根据设备的常规类型（例如打印与屏幕）、特定特征（例如浏览器视口的宽度）或环境（例如环境光条件）应用CSS样式时，您使用的是媒体查询

当你开始设计的时候，你通常开始为一个已知规格的设备设计，所以你根据你当前的设备设计它，然后将它应用于其他屏幕尺寸

---

因此，顺序如下：完成设计-->在底部添加媒体查询以适合所需的屏幕大小。

媒体查询与样式表的其余部分级联。您可以在样式表中穿插媒体查询，因此也可以根据需要级联样式

例如：

.my-class {
    color: red;
}

.my-class--modifier {
    color: blue;
}

@media screen and (min-width: 760px) {
    .my-class--modifier {
        color: green;
    }
}

.some-other-class {
    width: 200px;
}

@media screen and (min-width: 760px) {
    .some-other-class {
        width: 700px;
        background-color: gray;
    }
    .some-other-class .my-class {
        border: 2px solid red;
        border-radius: 4pt;
    }
}

---

这正是由于CSS的级联特性。您可以根据需要根据节、单个选择器等组织媒体查询。

最好将查询写在最下面。这将使您免于每次使用重要！的压力。

这是覆盖样式的规则…下面所有样式将覆盖顶部的内容…除非您使用“重要”！如果您按正确的顺序操作，则不必使用该内容。@John-这是一个答案，而不是评论。OP不能接受评论。是的，回答简单的问题之前让我被否决了……我不参与社区，也不同意这一点。为什么我只有一个答案d仍然被否决。请注意：您应该能够通过使用媒体查询样式避免使用

！important

“Css从上到下读取”语句不完全正确，还有选择器的特殊性，更具体的选择器可以覆盖不太具体的选择器，即使它在文件中的位置更高。@RedBit，是的，但在这种情况下，特殊性将作为！重要子句。文档仍然是从上到下读取的，但选择器可以定义保留哪个子句。如果两个选择器具有相同的特异性值，则以后者为准。