CSS選擇器可以包括，標(biāo)簽選擇器、類別選擇器、ID選擇器、交集選擇器、并集選擇器、后代選擇器、全局選擇器、偽類等，這些樣式應(yīng)用都已經(jīng)在flex得到支持
1.標(biāo)簽選擇器
標(biāo)簽選擇器是根據(jù)MXML文件中組件的類型來設(shè)置的，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|TextInput{
color: #FF0000;
}
s|Button{
color: #FFFF00;
}
</fx:Style>
<s:TextInput text="text input"/>
<s:Button label="button"/>
上面二個控件的顏色會隨之改變。
2.類別選擇器
類別選擇器是以一個點開頭，后面加上組件中通過styleName設(shè)置的樣式名來表示的類別選擇器，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
.btn2{
color: #FF0000;
}
</fx:Style>
<s:Button label="button2" styleName="btn2"/>
3.ID選擇器
ID選擇器是以#開頭，后面加上組件中設(shè)置的ID名來表示的類別選擇器，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
#btn1{
color: #FF0000;
}
.btn2{
color: #FF00FF;
}
</fx:Style>
<s:Button id="btn1" label="button1"/>
<s:Button label="button2" styleName="btn2"/>
4.交集選擇器
交集選擇器由兩個選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button#btn1{
color: #FF0000;
}
s|Button.btn2{
color: #FF00FF;
}
</fx:Style>
<s:Button id="btn1" label="button1"/>
<s:Button label="button2" styleName="btn2"/>
<s:Button label="button3"/>
5.并集選擇器
并集選擇器是多個選擇器通過逗號連接而成的，并集選擇器同時選中各個基本選擇器所選擇的范圍，任何形式的選擇器都可以，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button#btn1,s|Button.btn2{
color: #FF0000;
}
</fx:Style>
<s:Button id="btn1" label="button1"/>
<s:Button label="button2" styleName="btn2"/>
<s:Button label="button3"/>
6.后代選擇器
后代選擇器也叫派生選擇器，可以使用后代選擇器給一個元素里的子元素定義樣式，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|HGroup s|TextInput{
color: #FF0000;
}
</fx:Style>
<s:HGroup verticalAlign="middle">
<s:Label text="Text Input 1"/>
<s:TextInput text="sample"/>
</s:HGroup>
<s:TextInput text="sample"/>
7.全局選擇器
全局選擇器global可以將樣式應(yīng)用到所有的組件，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
global{
color: #FF0000;
}
</fx:Style>
<s:Label text="label"/>
<s:TextInput text="text input"/>
<s:Button label="button"/>
8.偽類
偽類是用來設(shè)置組件在不同狀態(tài)下的樣式，示例如下：
復(fù)制代碼 代碼如下:
<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
s|Button:up{
color: #FF0000;
}
s|Button:down{
color: #FF00FF;
}
s|Button:over{
color: #0000FF;
}
</fx:Style>
<s:Button label="button"/>
