jquery widget css overrides my own css

I'm using jquery tabs and a few other jquery widget.

Now, inside the tab, all the content is styled according to the jquery CSS. So, the easiest way is just to comment out or change a few of the jquery CSS definitions. But then obviously all the other widgets like autocomplete are not working anymore either.

How do other people solve this problem? My prefered solution would be, if I could leave the jquery CSS as it is, and just have my own default CSS inside the tabs back.

Example:

.ui-widget-content { border: 1px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; } 

This overrides the text color in m开发者_如何学JAVAy tab. It's ok for the other widgets, but looks bad inside tab.

---

I would either use different CSS classes (or start using classes on the elements or a containing element if you aren't already) for your elements, so you aren't conflicting with the jQuery styles.

---

I think the solution is to remove the CSS class file with jquery, like in the example for the buttom tabs:

<script>
    $(function() {
        $( "#tabs" ).tabs();
        $( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav > *" )
            .removeClass( "ui-corner-all ui-corner-top" )
            .addClass( "ui-corner-bottom" );
    });
</script>