Jquery addclass(), how to do with class conflict

I am making a navigation.

Here is CSS style

a:l开发者_开发百科ink.navA, a:visited.navA  
{  
    display:block;  
    width:120px;  
    color:#FFFFFF;  
    background-color:#003366;  
    text-align:center;  
    padding:4px;  
    text-decoration:none;  
    font-family:Calibri;  
}  
a:hover.navA  
{  
    background-color:#336699;  
}  
.selected  
{  
    background-color:#336699;  
}  

When I select a button, I hope the background-color of that button will stay the different color like hover with others. When I use addclass("selected"), the selected button does not change color. I think it is because that the will have two class "navA" and "selected", both of them define the background-color. My question is how to make selected class win. Thanks a lot!

You absolutly want to read this: http://htmldog.com/guides/cssadvanced/specificity/

You can add !important

.selected {
    background-color:#336699 !important;
}

This will make this rule override the others. However, it would be better if you just wrote better css.

EDIT

For example, if you want to have a different bg color for a button that has both .navA and .selected, you can write you CSS like this

.navA.selected {
    background-color:#336699;
}

Having it like this will tell the browser that any item with a class of navA AND selected should have a different bg. This way, you won't need to add the !important. Also, keep in mind that this will work ONLY if your element has both classes applied.