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

Question

我正在使用 JQuery 1.12 和 JQuery UI (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）上加载我的页面时，虽然我看到我的样式包含在老师，默认的类优先于我的类 ...

.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 中，但是在媒体部分的 "padding: .5em .5em;" 上有一个删除线，表明它已被覆盖。如何让我的 UI 选项卡 CSS 定义优先？

Answer 1

这样做就可以了：

@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 声明将 out-specify 标准样式。

Answer 2

!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 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 选项卡中的样式？

How do I override the styles from JQuery UI tabs?

css

jquery-ui

overriding

jquery-ui-tabs