JQM和CSS覆盖

Question

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

这是我与链接元素的导航元素：

<nav> 
    <ul> 
     <li><a href="new.html">New</a></li> 
     <li><a href="update.html">Update</a></li> 
    </ul> 
</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 a：visited {颜色：＃38c;颜色＃38c; }

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

NB：我是完整的小白，当谈到这些事情，所以请原谅我的无知朴素

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