CSS and jquery priority problem

Im a using tabs from the UI-plugin of jquery.

Those tabs dynammically add classes to <ul> and <ul><li> tags for visualisation.

However I work in an environment where I on开发者_StackOverflow中文版ly fill part of the website, that is inside a

<div id="content">

block and other css styles are applied to it.

Since #content ul li is more specific than the ul li of jquery, the first one takes precedence.

How can I overcome this problem?

UPDATE : I am aware of !important , that's however not an answer to this question, I hope to find a solution where I don't need to alter jquery-ui's css. (whatif you would use an online cached version? And if you have to cascade everything you might as well redefine it without !important)

UPDATE 2 : this is definitely not a javascript question, please don't tag it that way.

You can use !important keyword, which makes the selector most important, over cascading values:

#content ul li {
    color:red;
}
ul li  {
    color:black !important;
}

Is this what you were looking for?