为什么不应用独占媒体查询？

【问题标题】：Why isn't exclusive media query applying?为什么不应用独占媒体查询？
【发布时间】：2013-05-31 23:08:46
【问题描述】：

有谁知道为什么第二个媒体查询（401 到 750）不适用？

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

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

http://jsfiddle.net/xpnGh/2/

【问题讨论】：

标签： css media-queries

【解决方案1】：

min-width 和 max-width 描述符需要放在各自的括号中，and 在括号外，类似于将其放在 screen 和第一个描述符之间，如下所示：

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

【讨论】：

谢谢。顺便说一句，媒体查询总是必须排在最后吗？换句话说，如果我采用默认规则 #mydiv {color:#FF0000;} 并将其放在底部，它将覆盖查询。
@4thSpace：那是因为媒体规则不会以任何方式影响特异性，因此浏览器会按照您放置规则的顺序执行。请参阅stackoverflow.com/questions/13241531/… 和stackoverflow.com/questions/10306670/… 了解更多信息解释。