Html 奇怪的媒体查询行为

我遇到了一些奇怪的行为，我一辈子都搞不懂

我有一个流体网格设计与媒体查询的数量7准确地说。 我并不假装我所做的是最好的练习，所以对于踢腿，我提出了7个问题

为了简洁起见，我将只粘贴三个查询，一个是问题所在的查询，一个是之前的查询，另一个是之后的查询

前一个

麻烦的那个

紧接着的那个

发生了什么事？嗯，前后两个媒体查询将起作用，并将字体颜色更改为淡绿色和红色。造成问题的原因是没有将字体颜色更改为石灰色

奇怪的是，如果我在令人不安的媒体查询中添加任何其他css，那么特定的css就会起作用

为什么会这样

我已将整个css粘贴到此处：

我已将整个HTML粘贴到此处：

---

我还在第二个媒体查询中使用

，您想将字体颜色设置为石灰色吗

当前您正在设置背景色

试试这个：

@media only screen and (min-width: 1190px) and (max-width: 1409px) {
    body {
        color: lime;
    }
}

---

这并不重要，但在您的代码中不一致地使用媒体类型（所有且仅在屏幕上显示）有什么原因吗？您的代表和问答历史记录表明您熟悉媒体类型的工作原理，但您没有提供演示？这只是测试后的一个输入错误，对此表示抱歉。我已经修改过了。你从我的粘贴中运行代码了吗？基本上，任何应用于主体的css都被忽略了。我下载了所有三个代码片段并对它们进行了meregd。我会得到一个浅灰色的文本。这意味着它正在工作。你说的全是石灰色是什么意思。即使在调整浏览器窗口的大小时？当我的屏幕大小在1190和1409像素之间时。我总是得到正确的颜色

@media only screen and (min-width: 1190px) and (max-width: 1409px) {
    body {
        color: lime;
    }
}

@media only screen and (min-width: 1410px) {
    body {
        max-width: 2000;
        color: red;
    }
}

@media only screen and (min-width: 1190px) and (max-width: 1409px) {
    body {
        color: lime;
    }
}