Applying color to a:link, a:hover, a:visited and a:active screws up jQuery's .button() theming?

Question

site.css:

a:link, a:visited, a:hover, a:active
{
    color: #0033CC;
    text-decoration: none;
}

in page:

<a href="/foo/boo">test link</a>

jQuery:

$('a').button();

jQuery nicely creates a button for the 'test link' but some text colors on button's different states are the ones defined in site.css, not jQuery theme's.

So the point here is to provide some default look for all the links on the page without affecting jQuery's theming. What am I doing wrong?

Answer 1

It's working as intended, by specifying it in page it's taking priority over jQuery's definiton.

http://www.w3schools.com/css/css_howto.asp

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

If you want you can change your code to:

Javascript:

$("button").button();

HTML:

<button>Button label</button>