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

作者: 我这鸿鹄岂知你燕雀之志哉
来源: 51数据库
2021-06-23

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