Avoiding CSS cascading on buttons?

I have a div (id="tabContainer") where I defined some css like below:

#tabContainer .ui-state-active { 
   background: transparent url(img/uiTabsArrow.png) no-repeat bottom center; 
}

In this div, I have some buttons. The problem is that when I click on one of these buttons, the background defined in the css for the tabContainer is also displayed in the background of my buttons.

How can I avoid this?

It seems that the children of the div inherits of the background of the开发者_如何学Goir parent...

Thanks.

#tabContainer .ui-state-active input[type=button] { 
   background: none
}

Add the tag name to your class (assuming it's a DIV):

#tabContainer div.ui-state-active { 
   background: transparent url(img/uiTabsArrow.png) no-repeat bottom center; 
}

The ">" indicates a direct children of an element

#tabContainer .ui-state-active { 
   background: none;
}

#tabContainer>.ui-state-active { 
   background: transparent url(img/uiTabsArrow.png) no-repeat bottom center; 
}

So using this allows you to specify a different style between direct children and other elements

It does... You can use Firebug or IE developer tools to inspect the button and see what styles are being applied to your style and from whence they came... But basically, if you'll override the style with this:

#tabContainer .ui-state-active input {
    background: #000 (or your background that you want);
}