通过顺序优先级覆盖媒体查询答案

【问题标题】：Overriding media query through order precedence通过顺序优先级覆盖媒体查询
【发布时间】：2013-06-01 05:49:11
【问题描述】：

600px 媒体查询未应用。既然它确实有顺序优先，它不应该适用吗？

#mydiv {color:#FF0000;}
@media screen and (max-width:750px){
    #mydiv {color:#000;}
}
@media screen and (max-width:600px){
    #mydiv {color:#33CC33;}
}

<div id="mydiv">
    testing text color with media queries
</div>

http://jsfiddle.net/xpnGh/3/

【问题讨论】：

我遇到了同样的问题。 w3学校在那里没有说清楚。如果您检查 chrome 开发人员面板并进行一些实验，您会发现如果 多个类 应用，则执行 latest media query 的类具有优先权。所以说你给了'mydiv1'一个> 750px的属性，'mydiv2'> 600px，并声明了一个class='mydiv1 mydiv2'的div并有一个1000px的屏幕，两个类都按规则应用，'mydiv2'将优先，无论顺序如何 (='mydiv1 mydiv2', ='mydiv2 mydiv1')。

标签： css media-queries

【解决方案1】：

您的示例在 Chrome 中每晚使用 3 种颜色都可以正常工作？

尽管如此，永远不要指望顺序优先，要明确：

    @media screen and (max-width:750px) and (min-width:601px)

将立即解决任何问题并使您的代码更易于维护。

【讨论】：