flex4.5中CSS选择器的应用小结

所属分类: 网络编程 / Flex 阅读数: 810
收藏 0 赞 0 分享
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自定义右键菜单具体实现

自定义右键菜单在flex的实现想必有很多朋友都没有尝试过吧,下面与大家分享下如何实现,具体代码如下
收藏 0 赞 0 分享

flex的tree动态加载大量数据与滚动条相关问题探讨

本文将对flex的tree动态加载大量数据与滚动条相关的问题进行探讨,感兴趣的朋友可以参考下哈,希望对你有所帮助
收藏 0 赞 0 分享

flex tree自动显示横向滚动条实现代码

flex tree自动显示横向滚动条想必有很多的朋友都不会吧,下面与大家分享下具体的实现方法,感兴趣的你可不要错过了哈
收藏 0 赞 0 分享

在as中监听自定义事件并处理事件的实例代码

点击一张图片,响应事件。必须在AS中,去监听事件,并处理事件,下面是具体的实现思路及功能代码,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

FLEX HashMap遍历并取到需要的值

在项目用到了HashMap,需要遍历,并取到需要的值,具体实现代码如下,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

如何在Renderer中设置属性 Renderer中设置属性的方法实例

如何在Renderer中设置属性 Renderer中设置属性的方法实例,需要的朋友可以参考一下
收藏 0 赞 0 分享

flex复选框和下拉列表的几种用法整理

自己闲暇时间整理了有关复选框可下拉的几种用法,在这里与大家分享下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

Flex中实现对一个text渲染不同的字体颜色示例

本文为大家详细介绍下Flex中如何实现对一个text渲染不同的字体颜色,具体的实现思路及代码如下,有兴趣的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享

Flex正则表达式判断中文或全角字符代码

文本框值的length取出的是字符个数,并不是字节长度,如果含有中文或者全角字符,一个字符是2个字节,下面与大家分享下具体的判断方法,感兴趣的朋友可以参考下哈
收藏 0 赞 0 分享

Flex 改变树结点图标的2种方法介绍

本文为大家介绍两种方法改变树结点图标:根据是否有子结点进行改变、根据结点的属性,灵活改变图标,具体实现如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助
收藏 0 赞 0 分享
查看更多