FLEX4 CSS

来源：互联网发布：淘宝外卖会员卡编辑：程序博客网时间：2024/05/16 11:16

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