CSS選擇器可以包括，標(biāo)簽選擇器、類(lèi)別選擇器、ID選擇器、交集選擇器、并集選擇器、后代選擇器、全局選擇器、偽類(lèi)等，這些樣式應(yīng)用都已經(jīng)在flex得到支持
1.標(biāo)簽選擇器
標(biāo)簽選擇器是根據(jù)MXML文件中組件的類(lèi)型來(lái)設(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"/>
上面二個(gè)控件的顏色會(huì)隨之改變。
2.類(lèi)別選擇器
類(lèi)別選擇器是以一個(gè)點(diǎn)開(kāi)頭，后面加上組件中通過(guò)styleName設(shè)置的樣式名來(lái)表示的類(lèi)別選擇器，示例如下：
復(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選擇器是以#開(kāi)頭，后面加上組件中設(shè)置的ID名來(lái)表示的類(lèi)別選擇器，示例如下：
復(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è)選擇器直接連接構(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.并集選擇器
并集選擇器是多個(gè)選擇器通過(guò)逗號(hào)連接而成的，并集選擇器同時(shí)選中各個(gè)基本選擇器所選擇的范圍，任何形式的選擇器都可以，示例如下：
復(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.后代選擇器
后代選擇器也叫派生選擇器，可以使用后代選擇器給一個(gè)元素里的子元素定義樣式，示例如下：
復(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.偽類(lèi)
偽類(lèi)是用來(lái)設(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"/>
