flex4.5中CSS選擇器的應用小結

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

與HTML相似，Flex允許在MXML標簽中通過CSS樣式來設置組件的外觀。到flex4.5后已經基本上支持了HTML中的所有CSS的應用方式，這里主要來列舉下flex4.5中CSS選擇器的使用方法

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

1.標簽選擇器
標簽選擇器是根據MXML文件中組件的類型來設置的，示例如下：

 
<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設置的樣式名來表示的類別選擇器，示例如下：

復制代碼代碼如下:

 
<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選擇器是以#開頭，后面加上組件中設置的ID名來表示的類別選擇器，示例如下：

復制代碼代碼如下:

 
<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.交集選擇器
交集選擇器由兩個選擇器直接連接構成，其結果是選中二者各自元素范圍的交集，示例如下：

復制代碼代碼如下:

 
<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.并集選擇器
并集選擇器是多個選擇器通過逗號連接而成的，并集選擇器同時選中各個基本選擇器所選擇的范圍，任何形式的選擇器都可以，示例如下：

復制代碼代碼如下:

 
<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.后代選擇器
后代選擇器也叫派生選擇器，可以使用后代選擇器給一個元素里的子元素定義樣式，示例如下：

復制代碼代碼如下:

 
<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可以將樣式應用到所有的組件，示例如下：

復制代碼代碼如下:

 
<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.偽類
偽類是用來設置組件在不同狀態(tài)下的樣式，示例如下：

復制代碼代碼如下:

 
<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"/> 