CSS媒体查询相互覆盖[重复]答案

【问题标题】：CSS media query overriding one another [duplicate]CSS媒体查询相互覆盖[重复]
【发布时间】：2026-02-18 05:40:01
【问题描述】：

为什么当我输入这段代码时，第二个媒体查询覆盖了第一个

@media screen and (min-width:660px){
body{
    background:darkgreen;
    }

}

@media screen and (min-width:480px){
body{
    background:navy;
}

}

背景颜色只变为海军蓝。

但是当顺序颠倒时：

@media screen and (min-width:480px){
body{
    background:navy;
}


 @media screen and (min-width:660px){
body{
    background:darkgreen;
}

两个媒体查询都使用各自的宽度。

【问题讨论】：

specificity，“媒体查询不会为其包含的选择器添加任何特定性，但源顺序仍然很重要。”来源：css-tricks.com/logic-in-media-queries
可能是因为它们都符合条件并且后者被优先考虑，因为如果选择器相等，css 会向下进展 - ps，您在第二个代码块中为这两个条件编写了 480px

【解决方案1】：

而不是使用@media screen 和 (min-width:480px)

你可以用这个：

@media only screen and (max-width:480px) {
// css here
}

当某些东西低于 480 像素时，它会立即使用该查询。事实证明，这是我在创建响应式主题时使用的最佳方法。

但这实际上会与您的代码有相同的问题，具体取决于顺序。上面指向此链接http://css-tricks.com/logic-in-media-queries/ 的评论将解释原因。

【讨论】：

【解决方案2】：

'only screen'和just 'screen'的区别如下

@media screen and (max-width:632px)

这是针对具有屏幕和最大宽度为 632px 的窗口的设备应用该样式。这几乎与上述相同，只是您指定的是屏幕而不是other available media types，最常见的另一个是打印。

@media 仅屏幕和 (max-width:632px)

关键字“only”也可用于隐藏旧用户代理的样式表。用户代理必须处理以“only”开头的媒体查询，就好像“only”关键字不存在一样。

【讨论】：