jquery - Override one css class with another? -

I have a list, with a Li Style defined. I want to change the style of a personal element, but there is no visual effect in it. Example:

 . MyList li {background color: yellow; } .foo {background color: green; } & Lt; Ul class = 'myList' & gt; & Lt; Li & gt; Hello & lt; / Li & gt; & Lt; / Ul & gt;  

When I add an item to the list, in it. The MyList li style has been implemented properly. I now try to remove all the styles and apply the foo style to an item (using jquery):

  $ (item) .removeClass (); $ (Item) .addClass ("foo");  

The item does not change the color to green, but it reports that the class is set to 'foo':

  warning ($ ( Item) attr ('class'));  

So I think I do not understand the CSS rules here, it seems that the li class definition is overriding only what I am doing, though I want to be reverse true, I want to override Li style with Fu, how do we do it?

thanks

"myList li" selector more than ".foo" selector Specific, so when both rules apply, the item will be yellow. When you "$ (item) .removeClass ();" You remove the name of any class from Lee, but if UL has the name of the class "myList", then Lee will still get the styles from "Mylist li" selector.

One way to change the CSS will be:

 . MyList li {background color: yellow; }. MyList li.foo {background color: green; }  

Then it is clear that the second rule is more specific than ever.