html - JQM和CSS覆盖

我正在使用导航元素创建菜单。我也在使用JQM格式化列表视图。 JQM的CSS覆盖了nav样式，我根本不明白为什么。

这是我带有链接元素的nav元素：

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

这是nav元素内的link元素的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 a：visited {
    颜色：＃38c；
}

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

注意：关于这些事情，我完全是菜鸟，请原谅我的无知

最佳答案

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;
}

关于html - JQM和CSS覆盖，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39511048/