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\”/>
