样式的使用（三）

【1】样式中styleName属性可以添加多个类属性选择符

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		@namespace TestFor4 "TestFor4.*";
		.myFontStyle{
			font-size:18px;
		}
		.myColorStyle{
			color:#ff0000;
		}
	</fx:Style>
	
	<mx:VBox>
		<s:Button label="添加" styleName="myFontStyle myColorStyle"/>
	</mx:VBox>

【2】使用多个样式选择符

	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Button, s|TextInput, s|Label {
			fontStyle: italic;
			fontSize: 24;
		}
	</fx:Style>
	<s:Button id="myButton" label="Click Here"/>
	<s:Label id="l1" text="My Label"/>
	<s:TextInput id="ti1" text="Input text here"/>

【3】使用ID属性选择符

	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		@namespace TestFor4 "TestFor4.*";
		#myButton3{
			color:red;
		}
		s|Button#myButton2{
			color:blue;
		}
	</fx:Style>
	<s:Button id="myButton1" label="Click Me"/>
	<s:Button id="myButton2" label="Click Me, Too"/>
	<s:Button id="myButton3" label="Click Me, Three"/>

【4】使用累进

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		@namespace TestFor4 "TestFor4.*";
		mx|Button{
			font-size:16px;
		}
		mx|VBox mx|Button{
			color:red;
		}
		mx|VBox mx|HBox mx|Button{
			color:blue;
		}
		mx|VBox mx|VBox mx|Button{
			color:green;
		}
	</fx:Style>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<mx:Button label="Click Me"/>
	<mx:VBox>
		<!-- This button is red, and has a fontSize of 16. -->
		<mx:Button label="Click Me, Too"/>
	</mx:VBox>
	<mx:VBox>
		<mx:HBox>
			<!-- This button is blue, and has a fontSize of 16. -->
			<mx:Button label="Click Me, Also"/>
		</mx:HBox>
	</mx:VBox>
	<mx:VBox>
		<mx:VBox>
			<!-- This button is green, and has a fontSize of 16. -->
			<mx:Button label="Click Me, Click Me!"/>
		</mx:VBox>
	</mx:VBox>

【5】注意样式选择符  mx|Box

	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		mx|Box s|Button {
			color:red;
		}
	</fx:Style>
	<mx:VBox>
		<!-- This button is red, because VBox is a subclass of Box. -->
		<s:Button label="Click Me"/>
	</mx:VBox>
	<mx:HBox>
		<!-- This button is also red, because HBox is also a subclass of Box. -->
		<s:Button label="Click Me, Too"/>
	</mx:HBox>

【6】伪类选择符

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/halo";
		s|Button:up{
			base-color:red;
		}
		s|Button:down{
			base-color:blue;
			color: #FFFFFF;
		}
		s|Button:over{
			 base-color:black; 
			color: #FFFFFF;
		}
	</fx:Style>
	<s:Button label="Click Me" x="10" y="35"/>