Flex4.5中CSS选择器介绍
Flex #css选择器2014-04-10 09:58
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"/ >
相关文章
- Flex取消事件的默认行为发方法 2014/04/10
- flex分页打印操作实现代码 2014/04/10
- Flex动态生成可编辑的DataGrid 2014/04/10
- flash 报错捕获的方法 2014/04/10
- Flex压缩图片时exif信息丢失问题解决方法 2014/04/10
- Flex的Menu Tree实现代码 2014/04/10
- Flex3 DataGrid拖拽到ClumnChart动态显示图表 2014/04/10
- Flex DataGrid表头过滤搜索解决方法 2014/04/01