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

所属分类: 网络编程 / Flex 阅读数: 749
收藏 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中的httpservice方法与java进行交互

这篇文章主要介绍了使用flex中的httpservice方法与java进行交互,需要的朋友可以参考下
收藏 0 赞 0 分享

flex自定义按钮皮肤示例附图

这篇文章主要介绍了flex如何自定义按钮皮肤,需要的朋友可以参考下
收藏 0 赞 0 分享

flex利用webservice上传照片实现代码

这篇文章主要介绍了flex利用webservice上传照片实现代码,需要的朋友可以参考下
收藏 0 赞 0 分享

Flex实现的上传摄像头拍照并将UI保存为图片

这篇文章主要介绍了Flex如何实现上传摄像头拍照并将UI保存为图片,需要的朋友可以参考下
收藏 0 赞 0 分享

flex内嵌html网页示例代码

这篇文章主要介绍了flex如何内嵌html网页,需要的朋友可以参考下
收藏 0 赞 0 分享

flex通过java后台获取ip和pcname示例代码

这篇文章主要介绍了flex通过java后台获取ip和pcname的具体实现,需要的朋友可以参考下
收藏 0 赞 0 分享

Flex弹出窗口请求Action函数示例

这篇文章主要介绍了Flex弹出窗口请求Action函数,需要的朋友可以参考下
收藏 0 赞 0 分享

Flex中TabNavigator设置Tabs样式思路及源码

这篇文章主要介绍了Flex中TabNavigator如何设置Tabs样式有哪些思路,感兴趣的朋友可以看看下面的源码
收藏 0 赞 0 分享

Flex文件读取报错示例

这篇文章以示例的方式介绍了Flex文件读取报错的情况,需要的朋友可以参考下
收藏 0 赞 0 分享

Flex父子窗口相互调用实现思路及源码

这篇文章主要介绍了Flex父子窗口相互调用实现思路及源码,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多