Question

我在JQuery UI（1.12）中使用JQuery 1.12。我想覆盖每个选项卡中插入的填充，但仅限于某些小型移动浏览器，所以我在我的CSS中定义了这个

@media only screen and (max-width: 400px) {
    .ui-tabs .ui-tabs-nav {
        margin: 0px;  
    }
    .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        padding: .5em .5em; 
    }
}

但是，当我在Mac Chrome浏览器模拟器（基本上是Mac Chrome）上加载我的页面时，虽然我看到我的样式包含在teh insepctor中，但默认类优先于我的类... < / p>

.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
float: left;
padding: .5em 1em;
text-decoration: none;
}

@media only screen and (max-width: 400px)
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
    padding: .5em .5em;
}

我无法弄清楚如何将其正确地复制到SO中，但是通过“＃pad;”填充：.5em .5em;＆＃34;在媒体部分，表明它已被覆盖。如何使我的UI选项卡CSS定义优先？

Answer 1

使用!imporant是highly discouraged。在这种情况下加强特异性的适当方法将是：

@media only screen and (max-width: 400px) {
    .ui-tabs ul.ui-tabs-nav {
        margin: 0px;  
    }
    .ui-tabs ul.ui-tabs-nav a.ui-tabs-anchor {
        padding: .5em .5em; 
    }
}

我通过ul和a选择器提高了特异性。其他人与官方文件有关，但我想重申，有无数种方法可以做到这一点。我可以轻松地完成一些通用操作，例如在每个规则的开头添加html或body选择器。

@media only screen and (max-width: 400px) {
    body .ui-tabs .ui-tabs-nav {
        margin: 0px;  
    }
    body .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
        padding: .5em .5em; 
    }
}

Answer 2

这样做：

@media only screen and (max-width: 400px) {
   .ui-tabs .ui-tabs-nav {
     margin: 0px !important;  
   }
   .ui-tabs .ui-tabs-nav .ui-tabs-anchor {
     padding: .5em .5em !important; 
   }
}

http://www.standardista.com/css3/css-specificity/更详细地解释了特异性，但上面的代码将起作用，因为！important声明将超出标准样式。

Answer 3

使用!important是非常丑陋和糟糕的主意！试试这样：

@media only screen and (max-width: 400px) {
    .ui-tabs.ui-tabs ul.ui-tabs-nav {
        margin: 0px;  
    }
    .ui-tabs.ui-tabs ul.ui-tabs-nav a.ui-tabs-anchor {
        padding: .5em .5em; 
    }
}

这会增加css语法的优先级。

如何从JQuery UI选项卡覆盖样式？

3 个答案: