html - 如何覆盖CSS媒体类？

Question

我为我的元素使用了一些 css 库。

这个库有这个类:

@media only screen and (max-width: 480px) {
    .nav-tabs>li {
        margin-bottom:3px;
    }
    .nav-tabs>li,
    .nav-tabs>li>a {
        display:block !important;
        float:none !important;
        border:0 !important;
        background-color:rgba(0,0,0,0.01);
    }
    .nav-tabs>li>a :focus,
    .nav-tabs>li.active>a {
        background-color:rgba(0,0,0,0.05);
    }
}

当屏幕尺寸小于 480px 时，li 元素布局会发生变化。

当屏幕尺寸小于 280px(覆盖 - max-width: 480px)时，我需要更改默认行为。

我不想改变原来的库文件所以我粘贴了这个类:

@media only screen and (max-width: 280px) {
    .nav-tabs>li {
        margin-bottom:3px;
    }
    .nav-tabs>li,
    .nav-tabs>li>a {
        display:block !important;
        float:none !important;
        border:0 !important;
        background-color:rgba(0,0,0,0.01);
    }
    .nav-tabs>li>a :focus,
    .nav-tabs>li.active>a {
        background-color:rgba(0,0,0,0.05);
    }
}

在我的自定义 css 文件中。

但我仍然得到默认行为并且 li 元素布局仅在屏幕尺寸小于 480px 时才会更改。

知道为什么我不能覆盖上面的 CSS 类吗？

Answer 1

我认为您需要一些小于 280 像素的规则和一些介于 280 和 480 之间的规则。对吧？

@media (max-width:480px) and (min-width:281px) { 

}