flex4.5中CSS选择器的应用

与HTML相似，Flex允许在MXML标签中通过CSS样式来设置组件的外观。到flex4.5后已经基本上支持了HTML中的所有CSS的应用方式，这里主要来列举下flex4.5中CSS选择器的使用方法。 CSS选择器可以包括，标签选择器、类别选择器、ID选择器、交集选择器、并集选择器、后代选择器、全局选择器、伪类等，这些样式应用都已经在flex得到支持。

1、标签选择器： 标签选择器是根据MXML文件中组件的类型来设置的，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <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:VGroup>
        <s:TextInput text="text input"/>
        <s:Button label="button"/>
    </s:VGroup>
</s:Application>

2、类别选择器： 类别选择器是以一个点开头，后面加上组件中通过styleName设置的样式名来表示的类别选择器，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        .btn2{
            color: #FF0000;
        }
    </fx:Style>
    <s:VGroup>
        <s:Button label="button1"/>
        <s:Button label="button2" styleName="btn2"/>
    </s:VGroup>
</s:Application>

3、ID选择器： ID选择器是以#开头，后面加上组件中设置的ID名来表示的类别选择器，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <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:VGroup>
        <s:Button id="btn1" label="button1"/>
        <s:Button label="button2" styleName="btn2"/>
    </s:VGroup>
</s:Application>

4、交集选择器： 交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <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:VGroup>
        <s:Button id="btn1" label="button1"/>
        <s:Button label="button2" styleName="btn2"/>
        <s:Button label="button3"/>
    </s:VGroup>
</s:Application>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <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:VGroup>
        <s:Button id="btn1" label="button1"/>
        <s:Button label="button2" styleName="btn2"/>
        <s:Button label="button3"/>
    </s:VGroup>
</s:Application>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <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:VGroup>
        <s:HGroup verticalAlign="middle">
            <s:Label text="Text Input 1"/>
            <s:TextInput text="sample"/>
        </s:HGroup>
        <s:TextInput text="sample"/>
    </s:VGroup>
</s:Application>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        global{
            color: #FF0000;
        }
    </fx:Style>
    <s:VGroup>
        <s:Label text="label"/>
        <s:TextInput text="text input"/>
        <s:Button label="button"/>
    </s:VGroup>
</s:Application>

8：伪类： 伪类是用来设置组件在不同状态下的样式，示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
    <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:VGroup>
        <s:Button label="button"/>
    </s:VGroup>
</s:Application>
 
posted @ 2012-10-11 11:41  ddw1997  阅读(1306)  评论(0)    收藏  举报