JQM and CSS overrides - html

Question

I am using a nav element to create a menu. I am also using JQM to format a listview. The CSS of the JQM overrides the nav style and I simply cannot understand why.
This is my nav element with link elements:
<nav>
<ul>
<li>New</li>
<li>Update</li>
</ul>
</nav>
And this is the CSS for the link elements inside the nav element:
nav > ul > li > a {
color: #aaa;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
The color attribute is overridden by the JQM stylesheet (turning out blue). The specific overriding setting has been identified as:
.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: #38c;
}
What I don't understand is why is it being overridden? The JQM style has some specific classes which I didn't specify in my nav element, so why am I losing the color settings? Why is the JQM style applied to my non-classed link/nav?
NB: I am complete noob when it comes to these things, so excuse my plain ignorance

Answer 1

The JQM styles are probably added by it's script. As soon as you initiate the element, it gets the classes assigned to it.
The reason that it overrules is because the selector is more specific. If you want to read more about specificity, follow this link.
If you want to overrule the JQM style, you have a few options
Quick and dirty
Use the !important rule, it overrules all other styles
nav > ul > li > a {
color: #aaa !important;
background-color:#333;
display: block;
line-height: 2em;
padding: 0.5em 0.5em;
text-decoration: none;
}
Latter rule
Use the same selector, but be sure that your stylesheet is loaded after the JQM stylesheet
.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;
}