日期:2014-05-17  浏览次数:20616 次

v5_04 使用高级CSS选择器
v5_04 Introducing advanced CSS selectors 使用高级CSS选择器
?
ex5_04
这部分主要讲
后代选择器,伪类选择器,id选择器
?
1. 后代选择器
spark的panel的button的样式
s|Panel s|Button
{
color: #000000;
chromeColor: #D9E028;
}
s|Panel s|Scroller s|Button
{
chromeColor: #555555;
}
??
?
2.CSS的伪类选择器用来在一个附加条件的基础上与组件进行匹配
这个条件可以是动态的,并且可以不是由document树定义的
伪类选择器通常被用来将样式应用到组件的状态
如果前面不使用选择器,只使用:up这样的话, 就是一个通用的伪类选择器
<!--WizRtf2Html Charset=0 -->
s|Panel s|Button:down
{
color: #000000;
chromeColor: #D9E028;
}
s|Button:up
{
color: #FFFFFF;
chromeColor: #555555;
}
s|Button:over
{
color: #000000;
chromeColor: #D9E028;
} 
:up
{
color: #000000;
chromeColor: #D9E028;
}
??
?
3.id选择器
用来设计具有与CSS文件中定义的选择器相匹配的id属性的组件样式
该选择器与一个具体的组件实例相关联
employeeName是mxml中的id属性
#employeeName
{
color: #FF0000;
} 
??
<s:Label id="employeeName" 
text="Brad VanBrocklin - System Analyst" 
textAlign="center"/>
??
?
4.前面说过的另种css用法
.zhongyi
{
    color: #B41C1C;
    fontFamily: "中易黑体";
}

?
<fx:Style source="style.css"/>

<s:Label x="74" y="64" text="我的文字我来控制" width="180" height="18" styleName="zhongyi"/>
?