FLEX4 CSS

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.交集选择器
      交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，示例如下：

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

   
   
   
2. 5.并集选择器
          并集选择器是多个选择器通过逗号连接而成的，并集选择器同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，示例如下：
   

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

   
   
   
4. 6.后代选择器
         后代选择器也叫派生选择器，可以使用后代选择器给一个元素里的子元素定义样式，示例如下：
   

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

   
   
   
6. 7.全局选择器
          全局选择器global可以将样式应用到所有的组件，示例如下：
   

7. <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.伪类
          伪类是用来设置组件在不同状态下的样式，示例如下：
   

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