为什么我的CSS媒体查询被忽略或覆盖？

Question

这让我疯了!我在Stackoverflow上看了几个问题,看到一个ID元素优先于一个类元素(这很好知道,但我觉得这不是我的问题).这是我的NAVIGATION菜单,我正在努力.(我使用max-width btw)

这是我的资产净值的GENERAL CSS:

nav{ float:right; margin-left:2%;}
nav ul{ float:left; list-style:none; width:100%;}
nav ul li{ float:left; margin-left:5px; }
nav a{ display:inline-block; float:left; color:#f0f0f0; text-transform:uppercase; 
font-family:TrumpGothicWestRegular; font-size:1.5em; padding: 100px 20px 20px 20px; }

现在,当Viewport低于1140px时,我希望CSS更改菜单,如下所示:

nav ul li{ float:left;}
nav a{ float:left; display:inline-block; padding: 20px 20px 20px 20px;}

因此,基本上菜单将向左浮动,顶部填充较少.

当Viewport低于800px时,我希望CSS更改菜单,如下所示:

nav ul li{ float:none;}
nav a{ float:none; padding: 20px 20px 20px 20px;}

正如你所看到的,我只是将NAV Float改为NONE

现在,当我测试它时,GENERAL CSS工作正常,当1140px下的视口时,但是当我在800px以下时,NAV仍然漂浮在左边!! ?? 它似乎继承了1140px的CSS媒体查询？有任何想法吗？

更新:这是我定义媒体查询的方式

<link rel="stylesheet" media="only screen and (max-width: 800px), only screen and 
(max-device-width: 800px)" href="small-device800.css" />
<link rel="stylesheet" media="only screen and (max-width: 1140px), only screen and 
(max-device-width: 1140px)" href="small-device1140.css" />  

Answer 1

也许你的媒体查询有些不对劲？尝试这样的事情:

@media all and (min-width: 1140px) {
    nav ul li { float:left; }
}

@media all and (max-width: 1139px) and (min-width: 800px) {
    nav ul li { float:left; }
}

@media all and (max-width: 799px) {
    nav ul li { }
}