引导程序：CSS媒体查询不会覆盖原始CSS

Question

我需要使用单独的导航栏，具体取决于在移动设备还是台式机上查看该网站。我设计了两个导航栏（我知道使用JS会更容易，但这必须是CSS解决方案）。

<nav class="navbar navbar-default navbar-fixed-top pb-mobile-nav">
...

<nav class="navbar navbar-default navbar-fixed-top pb-main-nav">
...

我的CSS看起来像这样：

.pb-main-nav { 
    display:block;
}

.pb-mobile-nav  { 
    dispaly: none;
}

以及当我们使用iPhone Plus尺寸时

@media screen and (max-width: 414px) {

    .pb-main-nav { 
        display:none;
    }

    .pb-mobile-nav  { 
        dispaly: block;
    }
}

.pb-main-nav不接受任何显示，但是.pb-mobile-nav不接受block的显示，它仍然保持空白。我不明白为什么一个可行，而另一个却不可行（按照特定性规则），但是我现在没有菜单。这不是最佳的。 ：）

关于如何使此CSS工作的任何想法？

Answer 1

您的代码中的错误：

.pb-mobile-nav  { 
        dispaly: block;
}

更改为：

display: block;

Answer 2

将代码更改为

display: block !important;

Answer 3

即使不建议使用，也可以使用!important强制应用哪些属性。此外，使用相同的CSS选择器（在这种情况下为类），每种应用的样式的特异性都是相同的。但是，请确保CSS选择器的顺序正确，因为将应用最终样式。