快捷導(dǎo)航

flex4.5中CSS選擇器的應(yīng)用小結(jié)

更新時(shí)間：2013年04月28日 16:40:03 作者：

與HTML相似，F(xiàn)lex允許在MXML標(biāo)簽中通過(guò)CSS樣式來(lái)設(shè)置組件的外觀。到flex4.5后已經(jīng)基本上支持了HTML中的所有CSS的應(yīng)用方式，這里主要來(lái)列舉下flex4.5中CSS選擇器的使用方法

CSS選擇器可以包括，標(biāo)簽選擇器、類別選擇器、ID選擇器、交集選擇器、并集選擇器、后代選擇器、全局選擇器、偽類等，這些樣式應(yīng)用都已經(jīng)在flex得到支持

1.標(biāo)簽選擇器
標(biāo)簽選擇器是根據(jù)MXML文件中組件的類型來(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.類別選擇器
類別選擇器是以一個(gè)點(diǎn)開(kāi)頭，后面加上組件中通過(guò)styleName設(shè)置的樣式名來(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)表示的類別選擇器，示例如下：

復(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)設(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"/> 