JQM 和 CSS 覆盖

Question

我正在使用导航元素来创建菜单。我也在使用 JQM 来格式化列表视图。 JQM 的 CSS 覆盖了导航样式，我根本无法理解为什么。

这是我的带有链接元素的导航元素：

<nav>
    <ul>
        <li><a href="new.html">New</a></li>
        <li><a href="update.html">Update</a></li>
    </ul>
</nav>

这是 nav 元素内链接元素的 CSS：

nav > ul > li > a {
    color: #aaa;
    background-color:#333;
    display: block;
    line-height: 2em;
    padding: 0.5em 0.5em;
    text-decoration: none;
}

颜色属性被 JQM 样式表覆盖（变成蓝色）。具体覆盖设置已确定为：

.ui-page-theme-a a:visited, html .ui-bar-a a:visited, html .ui-body-a a:visited, html body .ui-group-theme-a一个：访问{ 颜色：#38c； }

我不明白为什么会被覆盖？ JQM 样式有一些我没有在导航元素中指定的特定类，那么为什么我会丢失颜色设置？为什么将 JQM 样式应用于我的非分类链接/导航？

注意：在这些事情上我完全是菜鸟，所以请原谅我的无知

Answer 1

JQM 样式可能是由它的脚本添加的。一旦您启动该元素，它就会获得分配给它的类。

之所以否决是因为选择器更具体。如果您想了解更多关于特异性的信息，请关注this link。

如果你想推翻 JQM 风格，你有几个选择

又快又脏

使用!important 规则，它会覆盖所有其他样式

nav > ul > li > a {
    color: #aaa !important;
    background-color:#333;
    display: block;
    line-height: 2em;
    padding: 0.5em 0.5em;
    text-decoration: none;
}

后一规则

使用相同的选择器，但请确保您的样式表在在 JQM 样式表之后加载

.ui-page-theme-a a:visited, 
html .ui-bar-a a:visited, 
html .ui-body-a a:visited, 
html body .ui-group-theme-a a:visited {
    color: #aaa;
}