Styling links with jQuery UI

I'm styling my <a>'s with jQuery UI. I did this:

$( "button, input:submit, a#jql" ).button();

My input:submit looks beautiful, but that's because I have no actual styling for such an element, so it uses purely the jQuery UI CSS. However, my <a>'s have a huge amount of styling, but I want to create unstyled links so that my current styling doesn't interfere whatsoever with jQuery UI styling. Should I just turn them into buttons? I have those unstyled too.

The jQuery UI has different rules for <a> links and for input:submits (the latter is shorter in height). I just need 开发者_如何学JAVAthem to have the same styling, but I can't change the links to submits. Could anyone familiar with this point me in the direction I want?

If you have a lot of pre-existing CSS on <a> tags then the easiest thing would be to make the ones you want to be controlled by jQuery UI into a <button>. Another option would be to put a CSS class on the <a> tags that you want to be controlled by the jQuery UI button and then reset all of the CSS for that CSS class, but that feels heavy handed. The reset would need to undo all of the styles you already have set on <a> tags.

If you want to use your own <a> styling. Just declare it in your CSS file and set it to important. The same goes for any other UI classes, Just do the re-declare in your CSS and set to important, so yours will have the priority.

Ex:

a{
 color:red !important;
 padding:5px !important;
 ...
}

Below are 2 great links on how to use the jQuery UI CSS framework.

http://wiki.jqueryui.com/w/page/12137970/jQuery-UI-CSS-Framework

http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/