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