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.偽類
偽類是用來設定組件在不同狀態下的樣式，樣本如下： 複製代碼 代碼如下:<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"/>