Flex CSS 样式控制

发布时间：2020-12-15 04:15:26 所属栏目：百科来源：网络整理

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

?与HTML相似，Flex允许在MXML标签中通过CSS样式来设置组件的外观。到flex4.5后已经基本上支持了HTML中的所有CSS的应用方式，这里主要来列举下flex4.5中CSS选择器的使用方法。

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

 ????????|Button{

 ????????????:?#FFFF00}

 </fx:>
 <s:TextInput text="text input"/>
 <s:Button label="button"/>

????? 上面二个控件的颜色会随之改变。

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

.btn2>

:Button?label="button2"?styleName"btn2"/>

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

????????#btn1:?#FF00FFButton?id"btn1"?"button1"4.交集选择器
????? 交集选择器由两个选择器直接连接构成，其结果是选中二者各自元素范围的交集，示例如下：
#btn1"button3"5.并集选择器
?????? 并集选择器是多个选择器通过逗号连接而成的，并集选择器同时选中各个基本选择器所选择的范围，任何形式的选择器都可以，示例如下：
,6.后代选择器
????? 后代选择器也叫派生选择器，可以使用后代选择器给一个元素里的子元素定义样式，示例如下：
|HGroup?:HGroup verticalAlign"middle">

??????Label?text"Text Input 1":TextInput?"sample":HGroup7.全局选择器
?????? 全局选择器global可以将样式应用到所有的组件，示例如下：
;

????????global"label""text input""button"8.伪类
?????? 伪类是用来设置组件在不同状态下的样式，示例如下：
:up:down:over:?#0000FF参考文献
1.flex4.5中CSS选择器的应用. http://www.iyoya.com/2011/06/26/css-advanced-selectors.html

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!