external css override

i'm a newbie to flex. here is my problem

 .css

    s|Button,mx|Button
    {
    chrome-co开发者_如何转开发lor: #CC0000;
     cornerRadius: 3;
     color: #CCCCCC;
     border-thickness:1;
     border-color:#000000;
    }

    mx|Accordion
    {
    chrome-color:#ffffff;
    }

the accordion's chrome color is being set to button's chrome color..also the dropdownlist's chrome color is being set to the same.. i tried..

<mx:accordion chromeColor="#ffffff" />

it is still #CC0000... and when i remove s|Button... i.e.,

mx|Button
{
chrome-color: #CC0000;
cornerRadius: 3;
color: #CCCCCC;
border-thickness:1;
border-color:#000000;
}

its normal...i don't want to change all the to ... Any HELP???

thanks in advance

There is no chrome-color style for Accordion component in mx namespace. You can use chromeColor style when you apply Spark theme only. Spark theme adds chromeColor style to Accordion container. So it's a theme specific style.

Styles are either common or associated with a specific theme. If the style is common, it can be used with any theme. If a style is associated with a specific theme, it can only be used if your application uses that theme.