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时，我需要更改默认行为（覆盖 - 最大宽度：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) { 

}

如何覆盖css媒体类？

1 个答案: