v5_04 运用高级CSS选择器 _HTML/CSS

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这样的话, 就是一个通用的伪类选择器

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